杂记 -- 关于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文件

        }

    }

}

巴特西

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

1、安装less,less-loader

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

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

4、设置全局的less变量

最新文章

热门文章