Webpack 4配置postcss-loader编译SCSS报错：多余大括号排查

我帮你排查了下遇到的问题，核心原因其实是loader的执行顺序搞反了，导致postcss-loader提前处理了未编译的SCSS文件，才抛出了“Unnecessary curly bracket”的奇怪语法错误。

先回顾下你的场景：
你为了兼容material-components-web，在Webpack 4里配置处理SCSS文件，最初的loader规则是这样的：

test: /\.s?[ac]ss$/,
use: [
  { loader: "css-loader" },
  { loader: "postcss-loader" },
  {
    loader: "sass-loader",
    options: {
      sourceMap: true,
      includePaths: ["node_modules", "node_modules/@material/*"].map(
        d => path.join(__dirname, d)
      )
    }
  }
]

你的index.scss内容包含局部文件引入和基础样式，但编译时一直报body大括号的语法错误，哪怕把test规则改成/\.scss$/也没用。

问题根源 #

Webpack的loader执行顺序是**从右到左（或者说从下到上）**的，你之前把postcss-loader放在了sass-loader的前面，这就意味着postcss-loader会先去处理还没被编译的SCSS代码——但postcss-loader是专门用来处理标准CSS语法的，它没法正确解析SCSS的结构，所以才会误判body的大括号是“多余的”。

解决步骤 #

1. 调整loader顺序：必须让sass-loader最先执行（负责把SCSS编译为标准CSS），然后是postcss-loader（处理编译后的CSS），接着是css-loader，最后是MiniCssExtractPlugin.loader（提取CSS到独立文件）。修改后的规则应该是：

{
  test: /\.scss$/,
  use: [
    MiniCssExtractPlugin.loader,
    { loader: "css-loader" },
    { loader: "postcss-loader" },
    {
      loader: "sass-loader",
      options: {
        sourceMap: true,
        includePaths: ["node_modules", "node_modules/@material/*", "src"].map(
          d => path.join(__dirname, d)
        )
      }
    }
  ]
}

2. 确保postcss有正确配置：你需要在项目根目录创建postcss.config.js文件，配置常用的postcss插件（比如autoprefixer），示例如下：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

如果没有这个配置文件，postcss-loader可能无法正常工作，甚至引发其他隐性问题。

3. 验证效果：调整完顺序和配置后，重新运行Webpack编译，sass-loader会先把你的SCSS编译成标准CSS，postcss-loader再处理这个合法的CSS文件，之前的语法错误就会消失了。

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