Sass编译报Unknown word错误，webpack5环境下插值写法报错如何解决？

Webpack 中 loader 的执行顺序为从右到左（从数组末尾向数组开头执行），你当前配置中postcss-loader放置在sass-loader的右侧，执行优先级高于sass-loader：

• 未修改前的执行逻辑：postcss-loader 首先接收到原始 Sass 代码，而 postcss 默认仅支持解析标准 CSS 语法，无法识别 Sass 的插值语法 #{$name}，直接抛出Unknown word错误，流程还没到sass-loader编译阶段就已中断。
• 移除postcss-loader后，sass-loader可正常将 Sass 代码编译为标准 CSS，后续 loader 可正常处理，因此报错消失。

不需要移除postcss-loader，仅调整 loader 顺序即可同时保留 Sass 编译能力和 postcss 处理能力。

1. 调整 loader 执行顺序 #

调整 scss 规则的 loader 顺序，保证sass-loader先执行，将 Sass 编译为标准 CSS 后再交给postcss-loader处理：

module: {
    rules: [
        // 其他规则保持不变
        {
            test: /\.(scss|css)$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
        },
    ],
},

调整后的执行逻辑为：sass-loader编译Sass为CSS → postcss-loader处理CSS兼容性 → css-loader解析CSS中的资源引用 → style-loader将CSS注入页面，完全符合预期执行流程。

2. 可选：postcss 兼容 Sass 语法配置 #

如果你的 postcss 配置需要直接处理原始 Sass 代码（比如配置了 scss 校验、代码规范检查等能力），可以为postcss-loader指定 Sass 语法解析器：
首先安装依赖：
npm install postcss-scss -D
再修改 loader 配置即可：

{
    test: /\.(scss|css)$/,
    use: [
        'style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                parser: 'postcss-scss'
            }
        },
        'sass-loader'
    ],
}

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