在vue项目中使用less

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';