无法通过Webpack为React组件添加样式的问题求助

看起来你在给React组件添加CSS样式时遇到了不生效的问题，我来帮你排查下Webpack配置里的问题～

首先看你给出的配置片段，发现css-loader的配置内容被截断了（比如camelC...没写完），而且现在Webpack更推荐用options参数来传递配置项，而非在loader名称后拼接query字符串，这样更清晰也不容易出错。

第一步：确认依赖安装 #

首先要确保你已经安装了处理CSS必需的loader：

npm install style-loader css-loader --save-dev
# 若使用yarn则执行
yarn add style-loader css-loader --dev

第二步：修正Webpack配置 #

下面是完整且正确的Webpack配置示例，替换你原有的配置内容：

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,
  },
  mode: 'development', // 建议添加mode，开发环境用development，生产环境用production
  module: {
    rules: [
      // 处理CSS文件的规则
      {
        test: /\.css$/,
        use: [
          'style-loader', // 将CSS注入到DOM中
          {
            loader: 'css-loader',
            options: {
              modules: true, // *启用CSS Modules，避免样式全局冲突*
              camelCase: true // *将CSS中的短横线类名转为驼峰式，方便在React组件中调用*
            }
          }
        ]
      },
      // 必须添加babel-loader处理React的JSX文件，否则组件无法正常编译
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

module.exports = config;

第三步：在React组件中正确使用样式 #

配置完成后，你可以这样在组件中引入并使用CSS：

// 导入样式文件，styles是一个包含类名的对象
import styles from './YourComponent.css';

function YourComponent() {
  // 使用驼峰式的类名应用样式
  return <div className={styles.myStyledBox}>这是添加了样式的React组件</div>;
}

export default YourComponent;

几个常见的注意事项 #

• 如果你不需要CSS Modules（比如全局样式），只需将modules设为false，或者简化为use: ['style-loader', 'css-loader']
• 确保CSS文件中的类名和组件中调用的名称对应，启用camelCase后，CSS里的my-styled-box会自动转为myStyledBox
• 不要忘记配置babel-loader处理JSX，否则React组件本身无法正常编译

内容的提问来源于stack exchange，提问作者Rocking chief