雜記 -- 關於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>