vue 2 用 sass-resources-loader 或 vue-cli-plugin-style-resources-loader；vue 3（vite）必须用 preprocessoroptions.additionaldata，且 @import 路径必须是相对或绝对路径，不能用别名（如 @/），末尾须加分号。
直接说结论：Vue 2 用 sass-resources-loader 或 vue-cli-plugin-style-resources-loader；Vue 3（Vite）必须用 preprocessorOptions.additionalData，且 @import 路径必须是相对或绝对路径，不能用别名（如 ~@/ 或 @/）。
Vue 3 + Vite：additionalData 是唯一可靠方式
Vite 不支持 sass-resources-loader 这类 Webpack 插件，强行加会报错或静默失效。官方推荐且实际生效的只有 css.preprocessorOptions.scss.additionalData（Less 同理）。
-
additionalData内容必须是字符串，且@import语句末尾要带分号（;），漏掉就白配 - 路径不能写
@/styles/vars.scss—— Vite 解析不到别名，得用"./src/styles/vars.scss"或path.resolve(__dirname, "src/styles/vars.scss") - 如果变量文件里用了
@use或@forward，确保它本身是合法的 SCSS 模块；旧式@import仍可用，但注意 Sass 6+ 已弃用 - 多个文件要拼接：用
\n换行，例如`@import "./src/styles/vars.scss";\n@import "./src/styles/mixins.scss";`
示例（vite.config.ts）：
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "./src/styles/variables.scss";`
}
}
}
})
Vue 2 + vue-cli：优先用 pluginOptions.style-resources-loader
比手动改 chainWebpack 更稳定，尤其对 Less 支持更原生。Sass 也能用，但官方 loaderOptions 的 data 字段只对 Sass 有效，Less 必须走插件。
- 安装：
yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D -
vue.config.js中配置时，patterns必须是绝对路径，path.resolve(__dirname, "src/...")是安全写法 - 别用
@/别名，也别用~@/——style-resources-loader不解析 webpack alias - Less 文件里变量用
@primary-color，Sass 用$primary-color，混用会报错 - 如果同时配 Sass 和 Less，插件只认一个
preProcessor，得拆成两个插件或选其一
为什么 main.js 里 import 全局样式文件不管用？
这是常见误解：在 main.js 里 import "@/styles/index.scss" 只会让该文件被编译一次，但它定义的变量、mixin、function **不会注入到其他单文件组件的 <style lang="scss"></style> 块中** —— 它们作用域是独立的。
- SCSS/Less 的变量和 mixin 不是 JS 变量，不通过 JS 模块系统传递
- 你看到的“生效”，往往是因为那个全局文件也写了实际 CSS 规则（比如重置样式），而非变量定义
- 真正需要的是预处理器层面的自动注入，不是运行时 import
容易忽略的兼容性坑
看似配好了，但编译不报错、变量却用不了，大概率栽在这几个点上：
- Sass 版本冲突：Vite 默认用
sass（Dart Sass），若项目里装了node-sass，得卸载干净，否则additionalData可能失效 - Less 文件用了
javascriptEnabled: true才支持内联 JS 表达式（如color(@primary-color)），但 Vite 的lessOptions需单独配，不是靠additionalData - Vue 单文件组件里写
<style lang="scss" scoped></style>，变量照样能用 —— scoped 不影响预处理器逻辑，只影响最终生成的 CSS 类名 - 修改变量文件后热更新有时不触发样式刷新，强制保存一次组件里的
<style></style>块可临时解决
最麻烦的其实是路径写错 + 分号遗漏 + 别名滥用，这三样占了 80% 的“配了没反应”问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
