无法使用 webpack 设置反应组件的样式

Question

所以我试图在我的 react 组件中添加一些 css 样式但失败了。 我的 webpack.config.js 看起来像：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './build');
var APP_DIR = path.resolve(__dirname, './src/client');

const config = {
   entry: {
     main: APP_DIR + '/index.js'
   },
   output: {
     filename: 'bundle.js',
     path: BUILD_DIR,
   },
   module: {
    rules: [
     {
       test: /\.css$/,
       use: [{
           loader: "style-loader"
       }, {
           loader: "css-loader?modules=true&camelCase=true"
       }]
     },
     {
       test: /\.(jsx|js)?$/,
       use: [{
         loader: "babel-loader",
         options: {
           cacheDirectory: true,
           presets: ['@babel/preset-react']
         }
       }]
     }
    ],

  }
};

module.exports = config;

我的客户端代码文件夹如下所示：

Client
--style
----index.css
--index.js

index.css 看起来像：

body{
    color: #555;
    background: #f85032;
    margin: 10px 30px;
}

在 index.js 中，我正在使用

加载 css 文件

import css from './style/index.css';

然后我做：

npx webpack
npm start

控制台输出中没有错误消息。网页显示，但没有 CSS 样式。有人可以帮我吗？谢谢！

看来，如果我在 index.html 中做一些内联 css，那么它可以工作吗？任何建议为什么会发生这种情况？谢谢！

Answer 1

更改为import './style/index.css'; 看看是否可行

Answer 2

我只是在这里猜测，因为我看不到你的 index.js

从您的 webpack 文件中，我可以看到您正在使用 css 模块。 这意味着您不能像通常那样只分配类，而是必须从您导入的 css 中获取它们。

因此

'<div className="className">'

变成

'<div class=Name"' + css.className + '">'

原因是 css 模块做了一些巧妙的命名，以始终使导入的 css 独一无二，以确保您没有任何全局范围和冲突（这是 css 模块想要的）

更新

我尝试使用您的 webpack 配置创建本地设置。你可以下载它here（它只是一个压缩文件）。

解压并进入文件夹，然后运行npm install和npm run webpack。您现在可以打开build/index.html 并查看结果。

也许你可以看到你正在做的不同的事情？