vue项目需正确配置less才能使用变量、@import等特性：安装对应版本依赖，通过loaderoptions的additionaldata全局注入变量文件，并注意scoped样式中嵌套与&的编译逻辑及路径解析规则。
Vue项目里直接写lang="less"就能用Less，但光装依赖不够，变量、@import、全局混入这些功能默认不生效，得手动配vue.config.js或vite.config.js。
npm install less less-loader --save-dev 装对版本才不报错
Vue CLI 5.x / Vite 5.x 推荐用 less@4.2.0+ + less-loader@11.1.0+（Webpack 5）或 vite-plugin-less@3.0.0+（Vite）。装错版本常见报错：Error: Cannot find module 'less' 或 less-loader is not a constructor。
- Vue CLI 项目：运行
npm install less less-loader@11 --save-dev - Vite 项目：运行
npm install less vite-plugin-less@3 --save-dev，并在vite.config.js中注册插件 - 如果用 pnpm，注意
less必须在根 node_modules 下，不能被 hoist 到 workspace 级别导致路径解析失败
全局变量和 @import 需要配置 loaderOptions
只写 <style lang="less"></style> 无法直接用 @import "@/styles/variables.less" —— 每个组件都得重复写，而且 @import 路径解析会失败。真正生效的方式是通过 loaderOptions 注入。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章