vue中使用less

一、less的基本使用

1、下载：

npm install less --save
npm install less-loader --save

2、使用（在vue文件里面直接使用，不用配置）

<template>
    <div class="box">
        你好
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
@color:red;
.box{
    color: @color;
}
</style>

二、配置全局样式的less变量

1、下载：

npm i style-resources-loader --save-dev 

2、创建全局less样式的变量文件
在assets——>style——>index.less

@Color:red;
@Size:22px;

3、在vue.config.js里面进行配置

module.exports = {
    // 第三方插件配置
    pluginOptions: {
        // 导入全局的less变量
        'style-resources-loader': {
            preProcessor: 'less',
            //在assets（静态资源文件夹）下创建全局样式文件；index.less 它就是less全局变量
            patterns: [require('path').resolve('./src/assets/style/index.less')]
        }
    },
}

4、使用：

<template>
    <div class="box">
        你好，我是全局变量的样式修改的
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
@color:red;
.box{
    color:@Color;
    font-size:@Size;
}
</style>

注：如果报以下的错误，就在下载一次 npm i style-resources-loader --save-dev ，安装完成记得重新启动。