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 文件的 标签中写 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>};

• 组件中同样用 即可生效

初始化时一步选好（脚手架交互阶段）

用 npm create vue@latest 或 pnpm create vue 初始化时，会进入交互式配置：

• 遇到 “Pick a CSS preprocessor” 提示，直接选 Less
• 后续一路回车或按需选择 TypeScript、Router、ESLint 等，脚手架会自动安装 less 并生成适配配置
• 生成的项目开箱即用， 可直接写嵌套、变量、mixin

只要 Node 版本 ≥ 12（Vite）或 ≥ 14（Vue CLI 5+），装完依赖、写对 lang 属性，Less 就能正常编译。不需要额外插件或构建配置微调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！