杂记 -- 关于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:代表一个定义好的变量
• 嵌套写法
• 计算和各种函数进行运算

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文件
        }
    }
}