React项目导入CSS文件失败，配置loader后报错求助

这个问题我遇见过，根源是你的webpack loader配置范围搞错了——你把css-loader/style-loader错误地应用到了JS文件上，导致它尝试用CSS解析规则去处理JS代码，自然识别不了import React from 'react'这种JS语法，才报了"Unknown word"的错误。

具体解决步骤： #

1. 修正webpack.config.js的module.rules配置
   确保CSS相关loader只针对.css后缀的文件，同时别忘了配置JS/JSX的处理loader（比如babel-loader，React项目基本都需要）。正确的配置示例如下：

   module.exports = {
     // ...其他基础配置（entry、output等）
     module: {
       rules: [
         // 处理JS/JSX文件
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: 'babel-loader'
         },
         // 仅处理CSS文件的loader规则
         {
           test: /\.css$/,
           // loader执行顺序是从右到左：先css-loader解析CSS，再style-loader注入到DOM
           use: ['style-loader', 'css-loader']
         }
       ]
     }
   };
   

2. 确认JS文件中的CSS导入路径正确
   检查你的src/index.js里的CSS导入语句，确保指向正确的CSS文件，比如：

   // 先导入CSS，再导入React相关模块（顺序不强制，但建议样式先导入）
   import './path/to/your/styles.css';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import {App} from './components/App';
   

3. 重启webpack-dev-server
   有时候webpack的缓存会导致新配置不生效，关掉当前的开发服务，重新执行npm start（或你配置的启动命令）即可。

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