杂记 -- 关于less在vue项目中的使用

1、安装less,less-loader

npm install less less-loader --save

2、配置wepack.js（vue3+版本中不用自己设置）

//添加less路径模块
    module: {
        rules: [{
            test: '/\.less$/',
            loader: 'less-loader'
        }]
    }

3、在vue组件中使用,及其常用用法

• @x:代表一个定义好的变量
• 嵌套写法
• 计算和各种函数进行运算

<style lang="less">//这里写选择语言为less
@import url('../Less/test.less'); //引用less文件
    .page1{
        margin-top:50px;
        background-color: @bgcolor;  //@x:是一个定义的变量，变量可以代替属性名，属性值，选择器
        p {  //嵌套，会被编译成: .page1 p{}
            color:red;
        }
        &:after { //嵌套中&：代指父类
            content:'after';
            display: block;
            width: @width*2; //计算
            height:pow(@height,2);//函数运算，可以直接使用多种的运算函数
        }
    }
</style>

4、设置全局的less变量

安装依赖： vue add style-resources-loader,css预处理选择less

设置vue.config.js:

const path = require("path");

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/assets/css/main.less")]//这里放全局的less文件
        }
    }
}