Webpack 4.6.0编译CSS报错：需适配对应loader处理文件类型

嘿，这个问题我之前踩过坑！Webpack本身只认识JavaScript模块，完全处理不了CSS语法，所以它看到CSS里的{、}这些符号时就会懵圈，直接抛出解析错误——核心原因就是你没给它配置处理CSS的loader。

一步步解决： #

1. 先装必要的依赖loader
   你需要两个loader：css-loader负责解析CSS文件的语法，style-loader会把解析后的CSS注入到页面的<style>标签里生效。在终端跑这个命令安装：

   npm install css-loader style-loader --save-dev
   

2. 修改Webpack配置文件
   在你的module.rules数组里加上处理CSS的规则，完整的配置参考下面的代码：

   var path = require('path');
   var webpack = require('webpack');
   
   module.exports = {
     mode: 'development',
     entry: './src/code/app.js',
     output: {
       path: __dirname,
       filename: 'bundle.js'
     },
     watch: true,
     module: {
       rules: [
         // 如果你原来有处理JS的规则（比如babel-loader），保留它就行
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: 'babel-loader'
         },
         // 新增处理CSS的规则
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         }
       ]
     }
   };
   

   注意loader顺序不能乱：Webpack是从右往左执行loader的，所以先让css-loader解析CSS，再让style-loader把样式挂载到页面上。

3. 清理你的CSS代码
   你提供的CSS里有多余的|符号，这会直接导致解析失败，确保你的CSS文件内容是干净的：

   div {
     background-color: yellow;
     color: red;
   }
   

额外小提示（生产环境用） #

如果之后要打包生产环境代码，建议用mini-css-extract-plugin替换style-loader——它会把CSS抽成单独的.css文件，而不是塞到style标签里，能优化页面加载性能。不过你现在用的是development模式，用style-loader足够方便调试。

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