如何在Vue 3中配置并引入SCSS样式？-css教程-PHP中文网

vite项目只需安装sass并配置additionaldata注入scss文件，vue cli则需在vue.config.js中配置loaderoptions.scss.additionaldata；两者均须用@别名路径、结尾加分号，且必须声明lang="scss"。

如何在vue 3中配置并引入scss样式？

Vue 3 项目里配 SCSS 不需要额外 loader（Vite）或必须写 vue.config.js（Vue CLI），但具体怎么做，取决于你用的是 Vite 还是 Vue CLI，以及是否要全局共享变量和 mixin。

Vite 原生支持 sass，不依赖 sass-loader。装错或多余安装反而可能引发冲突。

运行 npm install sass --save-dev（或 yarn add sass -D、pnpm add sass -D）即可
不用装 sass-loader —— Vite 2.0+ 已内置处理逻辑，装了会报 Cannot find module 'sass-loader' 或编译卡住
确保 .vue 文件中 <style lang="scss"></style> 写法正确，大小写敏感，scss 不能写成 SCSS 或 Sass
如果要用 @import 引入全局文件（比如 @/styles/variables.scss），直接在组件内写就行，无需配置额外插件

Vue CLI 默认不自动注入全局 SCSS 变量，必须通过 vue.config.js 的 css.loaderOptions.scss.additionalData 注入，否则每个组件都得手动 @import。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

在 vue.config.js 中写：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

additionalData 是字符串，不是数组；多文件用分号连接，例如：`@import "@/styles/variables.scss"; @import "@/styles/mixins.scss";`
路径里的 @/ 必须真实存在别名映射（通常 Vue CLI 默认已配好），否则报 File to import not found

靠 additionalData（Vue CLI）或统一入口（Vite）注入后，所有组件都能直接用 $color-primary 或 @include flex-center，但要注意作用域和覆盖风险。

变量名尽量加前缀，比如 $theme-color-primary，避免和第三方库（如 Element Plus）的 $--color-primary 冲突
不要在 additionalData 里 @import 有 :export 或 CSS-in-JS 输出的文件，Vite 和 Vue CLI 都不处理这种语法
如果用了 scoped，嵌套选择器中调用 mixin 生成的样式仍受作用域限制，但变量本身无影响
Vite 项目想等效实现全局注入，可在 vite.config.ts 中用 css.preprocessorOptions.scss.additionalData 字段，写法和 Vue CLI 类似

多数问题出在路径、拼写、依赖版本或构建工具误判上，而不是 SCSS 语法本身。

Undefined variable "$xxx"：检查变量是否真的被注入（Vue CLI 看 vue.config.js 是否生效；Vite 看 vite.config.ts 是否写了 preprocessorOptions）
Can't resolve '@/styles/xxx.scss'：路径错误或别名未配置；Vite 下可改用相对路径 ../styles/xxx.scss 快速验证
Invalid CSS after "...": expected 1 selector or at-rule, was "undefined"：通常是 additionalData 字符串末尾少了分号，或拼接时多了一个换行
Module build failed (from ./node_modules/sass-loader/dist/cjs.js)：大概率是装了 sass-loader 但没装 sass，或两个版本不兼容（推荐固定用 sass@1.77.6，Dart Sass 当前稳定版）