最稳方式是用additionaldata注入，style-resources-loader在vue3+vite中易失效；vue cli项目用css.loaderoptions.less.additionaldata最可靠，vite则需preprocessoroptions配合绝对路径。
直接用 additionalData 注入最稳，style-resources-loader 在 Vue 3 + Vite 场景下容易失效或报错。
Vue CLI 项目中用 css.loaderOptions.less.additionalData
这是目前 Vue 2/3（基于 webpack）最可靠的方式，不依赖额外 loader，也不需要改构建链路。
-
vue.config.js中配置additionalData字符串，必须以@import开头，路径支持@/别名（指向src） - 多个文件用分号分隔：
additionalData: `@import "@/styles/variables.less"; @import "@/styles/mixins.less";` - 注意：不能写成
@import "@/styles/variables";（少.less后缀会失败） - 变量和 mixin 都能直接在任意
<style lang="less"></style>中使用，无需重复@import
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import "@/styles/variables.less";`
}
}
}
}
Vite 项目中配 css.preprocessorOptions.less
Vite 不走 webpack 插件体系，style-resources-loader 完全不生效。必须用 preprocessorOptions。
- 路径必须是绝对路径，
resolve(__dirname, ...)或path.resolve()是安全写法 -
additionalData字段名不变，但值仍是字符串，不是数组 - 如果用
@/别名，需配合vite-plugin-style-import或手动 resolve，否则报 “Cannot find module”
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
}
}
}
})
style-resources-loader 的坑与适用边界
这个 loader 在 Vue CLI 项目里还能用，但在 Vue 3.3+ + Webpack 5 环境下常出现「variable is undefined」或热更新失效，尤其当全局文件含 .mixin 或嵌套 @import 时。
- 只适合纯变量（
@xxx），混用.class或.mixin易出作用域问题 -
patterns必须是数组，且每个路径path.resolve()后要真实存在，相对路径（如./src/...）大概率失败 - Vite、Rspack、Turbopack 等新构建工具完全不兼容，强行加会导致启动报错
真正麻烦的不是怎么写变量，而是变量被注入后是否参与了 CSS scope 编译——scoped 模式下 additionalData 注入的内容仍可访问，但 style-resources-loader 在某些版本里会被 scoped loader 截断。这点很容易被忽略，直到某个组件突然报 undefined variable。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
