Question

所以我试图为我的反应组件添加一些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（它只是一个zip文件）。

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

也许那时你可以看到你在做什么不同？

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

2 个答案: