PostCSS编译带变量选择器的SASS报语法错误如何解决

这个报错的根本原因是Webpack Loader执行顺序错误，PostCSS接收到了未经过Sass编译的原始SCSS代码，无法识别Sass专属的插值语法#{}

修复步骤 #

• 调整Webpack配置中loader的执行顺序，确保sass-loader先执行，处理完Sass语法后再把编译后的CSS交给postcss-loader处理。Webpack loader的执行顺序是从右到左、从下到上，正确的rules配置示例如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 第三步：把最终处理完的CSS交给css-loader、style-loader或者MiniCssExtractPlugin处理
          'style-loader',
          'css-loader',
          // 第二步：处理编译完成的标准CSS
          'postcss-loader',
          // 第一步：先把SCSS编译为标准CSS
          'sass-loader'
        ]
      }
    ]
  }
}

• 检查postcss配置是否包含不必要的SCSS语法校验规则，如果使用了stylelint等校验工具，确保校验未编译的SCSS文件时，配置了对应的SCSS解析器（比如postcss-scss）。常规场景下不需要PostCSS直接处理SCSS源码，保持默认处理标准CSS即可。
• 确认sass-loader的依赖是否完整，需要同时安装sass（Dart Sass）和sass-loader，避免缺少Sass编译依赖导致编译失效。

如果你确实需要PostCSS直接处理原始SCSS代码（比如要基于SCSS源码做自定义规则校验），可以在postcss配置中指定解析器为postcss-scss：

// postcss.config.js 或者postcss-loader的options配置
module.exports = {
  parser: 'postcss-scss',
  plugins: [
    // 你的PostCSS插件
  ]
}

修改完成后重新执行编译，Sass的插值语法会先被编译成普通的类名字符串，PostCSS处理标准CSS时就不会再抛出语法错误。

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