Vue 3项目初始化时配置Less支持需区分Vite和Vue CLI：Vite只需安装less并设lang="less"，可配global变量；Vue CLI需装less与less-loader并配置vue.config.js；脚手架交互初始化时直接选Less即可开箱即用。
Vue 3 项目初始化时配置 Less 支持，关键看用的是 Vite 还是 Vue CLI。两者处理方式不同，Vite 更轻量、默认集成度高；Vue CLI 则需手动补全配置。下面分场景说明核心操作：
使用 Vite 创建项目（推荐，主流选择）
Vite 对 Less 有原生支持，无需 loader，只需装依赖并正确声明语法即可：
- 创建项目后运行：
npm install less --save-dev（不用装 less-loader） - 在任何
.vue文件的<style></style>标签中写lang="less"，例如：
<style lang="less" scoped><br> .box {<br> @primary: #409eff;<br> color: @primary;<br> }</style> - 如需全局变量（比如统一颜色/尺寸），可新建
src/styles/variables.less，然后在vite.config.ts中配置：css: { preprocessorOptions: { less: { additionalData: '@import "./src/styles/variables.less";' } } }
使用 Vue CLI 创建项目
Vue CLI 默认不自动启用 Less，需两步补全：
蓝湖代码转vue2.0+element-ui
下载
将静态 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.
- 安装依赖：
npm install less less-loader --save-dev - 在项目根目录创建或修改
vue.config.js，加入：
module.exports = {<br> css: {<br> loaderOptions: {<br> less: { javascriptEnabled: true }<br> }<br> }<br>}; - 组件中同样用
<style lang="less"></style>即可生效
初始化时一步选好（脚手架交互阶段）
用 npm create vue@latest 或 pnpm create vue 初始化时，会进入交互式配置：
立即学习“前端免费学习笔记（深入）”；
- 遇到 “Pick a CSS preprocessor” 提示，直接选 Less
- 后续一路回车或按需选择 TypeScript、Router、ESLint 等，脚手架会自动安装
less并生成适配配置 - 生成的项目开箱即用，
<style lang="less"></style>可直接写嵌套、变量、mixin
只要 Node 版本 ≥ 12（Vite）或 ≥ 14（Vue CLI 5+），装完依赖、写对 lang 属性，Less 就能正常编译。不需要额外插件或构建配置微调。
