React组件引入CSS文件报错：Unexpected token, expected ;

我之前也碰到过完全一样的问题！你看到的这个Unexpected token错误，本质是Webpack没有正确识别CSS文件，反而把它当作JavaScript代码去解析了——毕竟CSS里的大括号和JS的语法逻辑不一样，自然会触发语法报错。

先再明确下你的报错场景：

SyntaxError: /Users/sm_emamian/Desktop/react js/shadyab/app/assets/home/css/style.css: Unexpected token, expected ; (1:5)
[0] > 1 | body {
[0] | ^
[0] 2 | text-transform: capitalize;
[0] 3 | font-family: FontAwesome,iransans,Helvetica,Arial,sans-serif;
[0] 4 | background-color: #F2F2F2;

下面是具体的解决步骤：

1. 检查Webpack配置中的CSS处理规则 #

你需要确保在Webpack配置文件（通常是webpack.config.js）里，添加了专门处理.css文件的模块规则。如果还没配置，把这段代码加进去：

module.exports = {
  // 其他已有的配置项...
  module: {
    rules: [
      // 处理JS/JSX的规则（你项目里应该已经有这个了）
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // 新增处理CSS的规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

这里要注意loader的顺序：style-loader必须放在css-loader前面，因为Webpack的loader是从右往左执行的——先让css-loader解析CSS内容，再让style-loader把解析后的样式注入到DOM中。

2. 确认loader已正确安装 #

虽然你提到已经配置了这两个loader，但还是可以再确认下是否真的安装到了项目依赖里，执行下面的命令：

npm install style-loader css-loader --save-dev
# 用yarn的话就执行这个
yarn add style-loader css-loader --dev

3. 重启Webpack开发服务器 #

修改完Webpack配置后，一定要重启你的开发服务器（比如npm start或者webpack-dev-server），否则新的配置不会生效，错误还会继续出现。

特殊情况：如果你用的是Create React App #

如果你的项目是用官方Create React App搭建的，默认已经配置好了CSS的处理逻辑，不需要手动修改Webpack配置。但如果你执行过npm run eject暴露了配置文件，那就要去config/webpack.config.*.js里检查CSS规则是否和上面提到的一致。

按照上面的步骤操作后，应该就能正常import CSS文件了！

内容的提问来源于stack exchange，提问作者S.M_Emamian