如何在Vue项目中引入Less编写CSS样式？-css教程-PHP中文网

Vue项目需正确配置Less才能使用变量、@import等特性：安装对应版本依赖，通过loaderOptions的additionalData全局注入变量文件，并注意scoped样式中嵌套与&的编译逻辑及路径解析规则。

如何在vue项目中引入less编写css样式？

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"> 无法直接用 @import "@/styles/variables.less" —— 每个组件都得重复写，而且 @import 路径解析会失败。真正生效的方式是通过 loaderOptions 注入。

Vue CLI：在 vue.config.js 里加 css.loaderOptions.less.additionalData，值为字符串 `@import "@/styles/variables.less";`
Vite：在 vite.config.js 的 plugins 中配置 vitePluginLess({ additionalData: `@import "@/styles/variables.less";` })
别用 modifyVars 做业务变量 —— 它只适用于 Ant Design 这类 UI 库的定制主题，普通项目变量请走 additionalData 或单独 @import

scoped 样式里嵌套和 & 的行为容易误解

<style lang="less" scoped> 不等于“把 Less 编译完再加 scoped”，而是先编译 Less，再给最终 CSS 加属性选择器。这意味着嵌套规则里的 & 仍指向当前组件根元素，不是父选择器。

vue-composition-api-best-practices

Vue 3 组合式 API 与

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

4816

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

1037

2023.07.27