安装与使用less_安装less

1、安装less 和less-loader

npm i less less-loader -D  //安装到开发环境
1

检查是否安装成功；

less -v
1

2、main.js添加如下配置；

import less from 'less'
Vue.use(less)
1
2

3、引入

scoped、lang="less"这两个顺序不能颠倒！
scoped代表样式只在当前页面使用

<style scoped lang="less"></style>  
或导入
import '@/css/common.less'
1
2
3

4、引入全局less变量

1）安装vue-cli-plugin-style-resources-loader
2）安装style-resources-loader
3）编辑vue.config.js
1
2
3

vue.config.js配置添加

const path = require('path')

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname,'src/assets/css/vars.less')]
        }
    }
}
1
2
3
4
5
6
7
8
9
10