css - 无法使用 webpack 设置 React 组件的样式

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'; 并查看是否有效