在vue项目中使用less

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 2.9w 阅读

38 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载注明出处。可以搜索微信公众号[老朱的读书随想]联系我

文章标签：

#less #vue #css

vue/elementUI 同时被 2 个专栏收录

6 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成和使用Less，包括安装依赖、在.vue文件中编写Less代码以及引入全局Less文件。通过利用Less的变量、mixins、嵌套和@import等功能，可以显著提高CSS代码的组织和复用性，从而增强项目的可维护性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

less提供了可编程的css，包括以下机制，可以提高css代码的可维护性和可读性

定义变量并多次使用
mixins（一个样式中包含另一个样式）
格式嵌套（可以形成代码块，有利于提高可读性）
@import （可以将样式拆分到不同的文件中，形成组件）

更多信息可以参考 less官网。本篇主要来讨论如何在vue项目中使用less。

安装依赖包

npm install -D less less-loader@7.3.0

由于less-loader和webpack版本适配的问题，下面提供更多版本信息

@vue/cli的版本

$ vue --version
@vue/cli 4.5.13

package.json中的版本

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.11"
},

在.vue文件中使用less

在.vue文件中，只需要在style节点加上lang="less"属性，即可可直接使用less

<style lang="less">
@width: 400px;
@height: 200px;

.content {
    width: @width;
    height: @height;
    background-color: yellowgreen;
}
</style>

引入全局的less文件

假设有一个包含全局样式的less文件，路径是src/assets/common.less，内容如下

@beautiful-color: red;

body {
    background-color: @beautiful-color;
}

接下来在main.js中引入一下即可

import '@/assets/common.less';