使用fixed-data-table-2导入CSS文件时出现模块解析错误

嘿，这个问题我碰到过好几次了，本质就是Webpack不知道该怎么处理CSS文件导致的，给你几个靠谱的解决步骤：

• 第一步：安装必要的Loader
  你需要先装style-loader和css-loader这俩Webpack处理CSS的核心依赖，在项目根目录运行命令：

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

• 第二步：配置Webpack处理CSS文件
  找到你的webpack.config.js文件（如果是自定义Webpack配置的话），在module.rules数组里添加处理.css文件的规则：

  module.exports = {
    // 保留你已有的其他配置项
    module: {
      rules: [
        // 别忘了保留原本处理JSX的babel-loader规则
        {
          test: /\.css$/,
          use: [
            'style-loader', // 把CSS代码注入到DOM中
            'css-loader'    // 解析CSS里的@import、url()这类语法
          ]
        }
      ]
    }
  };
  

  要是你用的是create-react-app且已经执行过eject操作，其实默认应该有类似配置，但如果是自己搭的Webpack环境，一定要加上这段。

• 第三步：重启开发服务
  配置改动后，记得关掉当前运行的Webpack dev server，重新启动它，新的配置才会生效。

另外提个小细节：你写的导入路径import 'fixed-data-table-2/dist/fixed-data-table.css';是完全正确的，不用修改。如果之后生产环境想把CSS提取成单独文件，可以用extract-text-webpack-plugin调整配置，但开发环境用上面的方案就足够了。

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