Webpack 4配置Sass/CSS Loader时报Unknown word错误，求助

嘿，咱们来拆解下你遇到的问题——核心原因是loader的执行顺序搞反了，而且多余的raw-loader和css-loader冲突了，才导致出现module.exports相关的语法错误。

问题出在哪？ #

Webpack的loader是从右往左（从下到上）执行的，你现在的SCSS loader顺序是css-loader → raw-loader → sass-loader，这完全颠倒了！而且raw-loader会把文件内容直接转成字符串导出，css-loader又会把CSS处理成CommonJS模块，两者叠加就会让后续的loader把module.exports = "..."这种JS语法当成CSS来解析，自然就报“Unknown word”了。

修正后的Webpack配置 #

把SCSS相关的loader顺序调整正确，同时移除多余的raw-loader：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["env"]
        }
      }
    },
    {
      // sass / scss loader 正确配置
      test: /\.(sass|scss)$/,
      use: [
        // 可选：如果需要把CSS注入到页面DOM中就加这个，不然可以用mini-css-extract-plugin提取成单独文件
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      exclude: /node_modules/
    },
    {
      test: /\.(png|jpg|gif|svg)$/,
      use: [
        'file-loader'
      ]
    }
  ]
}

关键细节说明 #

• 正确的loader执行流：sass-loader先把SCSS编译成纯CSS，接着css-loader处理CSS里的@import、url()这些语法，把CSS转换成CommonJS模块，最后如果用style-loader，就会把编译后的CSS注入到页面的<style>标签里。
• 为什么要删raw-loader：它的作用是把文件内容转成字符串，而css-loader已经能处理CSS模块了，两者一起用只会添乱，导致JS语法被当成CSS解析报错。
• 关于global.scss里的@import：只要css-loader是正常配置的（默认就支持处理@import），你的那些导入语句都会被正确解析，不用额外折腾。

最后验证步骤 #

1. 先卸载没用的依赖（如果之前装了的话）：

npm uninstall raw-loader

2. 确保必要的loader都装了（sass-loader依赖sass，所以要一起装）：

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

3. 替换成上面的配置，重新跑构建命令就行啦！

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