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

一、安装less,less-loader

npm install less less-loader --save

二、配置wepack.js（vue3+版本中不用本身设置）

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

三、在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>