Vue3导入外部.scss文件被当作普通CSS解析致语法失效问题

核心错误点 #

• 导入SCSS文件时使用了CSS原生@import url()语法，该语法会直接将目标文件作为纯CSS资源引入，不会经过sass-loader编译，SCSS特有的嵌套、变量、混合宏等语法会被原样输出到浏览器，触发语法无效报错。
• vue.config.js配置逻辑错误：sassOptions是传递给sass编译器本身的配置项，不支持传入webpack的module.rules规则，手动写入的loader配置完全无效，还会干扰Vue CLI内置的SCSS处理逻辑。

复现场景 #

外部SCSS文件代码 #

文件路径：@/styles/_default.scss

div {
  background-color: white;
  & span {
    color: black;
  }
}

异常表现 #

• span标签无法匹配到对应嵌套样式
• 浏览器开发者工具中& span写法被标记为无效CSS语法
• 相同代码写在.vue文件的<style lang="scss">块内可正常编译生效

错误导入写法 #

<style lang="scss">
@import url('@/styles/_default.scss');
</style>

错误配置 #

vue.config.js错误配置如下：

module.exports = defineConfig({
  transpileDependencies: true,
  css: {
        loaderOptions: {
          sass: {
            sassOptions: {
              module: {
                rules: [
                  {
                    test: /\.s[ac]ss$/i,
                    use: [
                      "style-loader",
                      "css-loader",
                      "sass-loader",
                    ], }, ], }, }, }, },
        },
  })

依赖版本 #

"dependencies": {
   "vue": "^3.2.13",
},
"devDependencies": {
   "sass-loader": "^13.0.2",
   "node-sass": "^7.0.1",
}

修复步骤 #

1. 修正SCSS导入语法，去掉原生CSS的url()包裹，使用SCSS原生导入语法：

<style lang="scss">
/* 错误写法：@import url('@/styles/_default.scss'); */
@import '@/styles/_default.scss';
</style>

2. 修正vue.config.js配置，删除错误写入的webpack规则配置。Vue CLI已经内置了.scss/.sass文件的完整处理链路，不需要手动配置style-loader、css-loader、sass-loader。修正后的最简配置如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
  // 无全局注入SCSS变量/混合宏需求时，不需要额外配置css.loaderOptions
})

3. （可选优化）node-sass已停止维护，sass-loader@13+版本官方推荐使用dart-sass（npm包名为sass），可执行以下命令替换，避免后续出现兼容问题：

npm uninstall node-sass
npm install -D sass

修改完成后重启开发服务，外部SCSS文件即可被正常编译，嵌套等SCSS特性可正常生效。

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