必须配合按需引入插件与less解析配置才能实现样式按需加载，否则会全量打包、编译失败或主题变量失效；需启用babel-plugin-import的style: true及librarydirectory: 'es'，并正确配置javascriptenabled和additionaldata。
不能直接靠 css 配置项实现按需加载，必须配合组件库的按需引入插件 + Less 解析配置，否则样式会全量打包或编译失败。
为什么 css: ['ant-design-vue/dist/antd.css'] 不行
这种写法是全量引入 CSS 文件，体积大、无法 Tree Shaking，且与按需引入组件（如只用 Button）不匹配 —— 组件 JS 按需了，样式却还是全量加载，浪费资源，还可能因样式冲突导致 UI 异常。
- 全量 CSS 会覆盖你自定义的主题变量，比如
@primary-color失效 - 若同时用了
babel-plugin-import引入组件，但没配对应样式解析，控制台会报.bezierEasingMixin();或Cannot resolve 'less'类错误 - Nuxt 2 和 Nuxt 3 的 Less 解析机制不同，混用高版本
less-loader（如 v8+）大概率直接崩溃
babel-plugin-import 必须启用 style: true 并指定 libraryDirectory
这是触发按需加载样式的开关。仅引入组件 JS 不等于样式也会自动加载，style 参数决定是否让插件自动 import 对应的 Less 文件。
- 对
ant-design-vue，必须设libraryDirectory: 'es'（不是lib），因为其es/下才提供未编译的 Less 源文件 -
style: true表示自动导入同名 Less；若设为'css'，则只导入编译后的 CSS，失去变量定制能力 - Nuxt 2 中需在
nuxt.config.js的build.babel.plugins里配置，Nuxt 3 则要改用 Vite 的vite.css.preprocessorOptions.less.additionalData注入变量，二者不可混用
Less 解析必须开启 javascriptEnabled 和正确 lessOptions
Ant Design 系列组件的 Less 文件大量使用 JavaScript 表达式（如 color(~`colorPalette("@{primary-color}", 5)`)），默认关闭，不启用就会报 Unrecognised input 或 ReferenceError。
- Nuxt 2：在
build.loaders.less下加lessOptions: { javascriptEnabled: true }（注意：v5+less-loader才支持lessOptions，低版本直接写javascriptEnabled: true） - Nuxt 3：该配置迁移到
vite.css.preprocessorOptions.less，且必须搭配additionalData注入全局变量文件（否则@import路径解析失败） - 切勿在
additionalData导入的变量文件中写实际样式规则（如.foo { }），否则所有组件都会重复注入这些样式
版本兼容性是最大雷区
不是装上 less 和 less-loader 就能跑，Nuxt 2 / 3 对依赖版本极其敏感，错一个就卡死。
- Nuxt 2 推荐锁定：
less@3.8.1+less-loader@4.1.0或@7.3.0；less-loader@8+会报Cannot use import statement outside a module - Nuxt 3（Vite）推荐：
less@4.2.0+less-loader可不装（Vite 内置 less 支持），但必须确保additionalData路径中的@别名已正确定义（默认指向src/） -
@nuxtjs/style-resources在 Nuxt 3 中已废弃，强行安装会导致构建时Cannot find module 'unplugin-vue-components'类错误
最易被忽略的是：改完 nuxt.config.js 或 nuxt.config.ts 后，必须手动重启 dev server —— 缓存不会自动刷新，变量看似生效，实则用的还是旧编译结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
