Vue 3项目中导入外部SCSS变量文件不生效是什么原因？

问题根源 #

你遇到的问题是错误使用CSS原生@import url()语法导入SCSS资源导致的：

• @import url()是标准CSS语法，sass-loader会将其识别为普通CSS外部资源导入，不会对引入的文件做SCSS编译处理，因此_variables.scss中定义的变量完全没有被解析，才会出现$primary-black原样输出的情况。
• 当你把变量直接写在styles.scss中时不需要跨文件导入，sass直接编译当前文件内容，因此可以正常生效。

修复步骤 #

1. 修改styles.scss的导入语法，删除url()包裹：

// 修改前
// @import url('./_variables.scss');
// 修改后
@import './_variables.scss';
// 也可以简化写法（局部文件可省略下划线和后缀）
// @import './variables';

2. 修改App.vue中style块的导入语法，同样删除url()包裹：

<style lang="scss" scoped>
/* 修改前 */
/* @import url('./assets/scss/styles.scss'); */
/* 修改后 */
@import './assets/scss/styles.scss';
</style>

3. 额外注意：如果你的styles.scss中包含body这类全局样式，scoped属性会导致这部分样式不生效，需要全局样式可以单独去掉scoped，或者将全局样式在main.js/ts中直接导入：

// main.js/ts 中添加
import './assets/scss/styles.scss'

4. 改完后重启本地开发服务器即可生效。

可选优化（全局自动导入变量） #

如果需要在所有组件的SCSS中直接使用变量，无需每次手动导入，可以在构建工具配置中添加全局注入：

Vite 项目（vite.config.ts） #

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/_variables.scss";`
      }
    }
  }
})

Vue CLI 项目（vue.config.js） #

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/scss/_variables.scss";`
      }
    }
  }
}

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