webpack使用css-loader加载CSS时报错‘module build failed: unknown word’

我刚踩过一模一样的坑！先跟你说说我的环境：

• 系统：Windows 10 Pro
• 依赖版本：webpack 4.8.1、node 8.9.4、npm 6.0.0

问题重现 #

我尝试用css-loader加载CSS文件时，运行webpack命令就一直抛出Module build failed: Unknown word的错误，折腾了好久——查了webpack官方文档、翻了一堆Bug报告，按步骤操作还是不行。唯一能临时凑合用的办法就是在require CSS的语句前加!!前缀，但这显然不是长久之计。

问题根源 #

最后才发现，完全是webpack配置里的loader顺序写错了！

webpack的loader是从右到左（或从下到上）执行的，所以我们需要把处理顺序反过来：先让预处理器（比如sass-loader）处理样式，再用css-loader解析CSS，最后用style-loader把样式注入到页面DOM中。顺序搞反的话，webpack就会在错误的阶段处理文件，导致出现莫名其妙的语法报错。

正确配置示例 #

把你的module.rules调整成这样就可以解决问题了：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/, // 匹配css、scss、sass格式的文件
        use: [
          'style-loader',   // 最后执行：将样式注入到DOM中
          'css-loader',     // 中间执行：解析CSS文件
          'sass-loader'     // 最先执行：处理Sass/Scss预编译语法（不用的话可以移除）
        ]
      }
    ]
  }
};

调整顺序之后再运行webpack，应该就能正常编译CSS文件了！

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