style-resources-loader 在 Vue3 项目中默认不生效，根本原因是 Vue CLI 5+ 已弃用其旧集成方式且不兼容 Webpack 5，应改用 less-loader 的 additionalData 方式注入全局变量。
style-resources-loader 在 Vue3 项目中默认不生效，根本原因不是配置写错了，而是 Vue CLI 5+（对应 Vue3 生态）已弃用该插件的旧集成方式，且 vue add style-resources-loader 命令在新版本中不再兼容。
Vue CLI 5+ 不再支持 pluginOptions.style-resources-loader
Vue CLI 4.5 之后升级到 Webpack 5，而 style-resources-loader 的 v1.x 版本未适配 Webpack 5 的模块解析机制。你看到的 vue.config.js 中 pluginOptions 配置看似正确，实际不会被加载——CLI 启动时根本不会读取这个字段，控制台也无报错，变量就是“静默失效”。
替代方案：改用 less-loader 的 additionalData
这是目前 Vue3 + Vite 或 Vue CLI 5+ 下最稳定、无依赖冲突的方式。核心是让每个 .less 文件在编译前自动注入全局变量内容，而非靠 loader “注入资源”。
- 确保已安装
less和less-loader（注意版本匹配：less@4.x+less-loader@11.x是当前 Vue CLI 5.0.8 的推荐组合） - 在
vue.config.js中修改css.loaderOptions.less：
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `@import "@/styles/variables.less";`
}
}
}
}
⚠️ 注意：additionalData 中的路径必须是相对 @ 别名的合法路径；如果 variables.less 里用了 @charset "UTF-8";，请确保它在文件最顶部，否则 less-loader 会解析失败并报 Module build failed 错误。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
常见错误现象和排查点
变量明明写了却提示 Variable @xxx is undefined，往往不是路径错，而是：
-
variables.less文件本身语法错误（比如漏了分号、用了中文引号） - 路径里用了
~前缀（如@import "~@/styles/variables.less"），less-loader不识别这种 alias 写法，只认@别名或绝对路径 - 多个
additionalData拼接时没换行，导致 import 语句被连成一行（应写成模板字符串并保留换行或加分号） - Vite 项目误用了 Vue CLI 配置——Vite 需在
vite.config.ts中配置css.preprocessorOptions.less.additionalData
真正卡住人的地方，从来不是“怎么加变量”，而是“为什么加了也不认”。additionalData 方式绕过了 loader 插件链的兼容性问题，但要求你对路径解析和 less 编译时机有基本感知——变量注入发生在每个文件编译前，不是全局 scope 注入，所以不能跨预处理器（比如在 scss 文件里用 less 变量）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
