style-resources-loader插件 配置全局less变量

1. 插件安装

确保已安装less、less-loader

less官方安装及使用文档：https://www.npmjs.com/package/less

npm i less

less-loader官方安装及使用文档：https://www.npmjs.com/package/less-loader

npm i less-loader

或

npm install less-loader --save-dev

或

npm install -D less-loader less

1.1 方法1：分开安装

安装style-resources-loader
官方安装及使用文档：https://www.npmjs.com/package/style-resources-loader#resolveurl

npm i style-resources-loader

安装vue-cli-plugin-style-resources-loader
官方安装及使用文档：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

npm i vue-cli-plugin-style-resources-loader

1.2 方法二：直接使用vue add style-resources-loader安装

vue add style-resources-loader
vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用方法一

选择预处理器
安装完成后会让你自行选择预处理器，本文选择less预处理器

选择预处理器

2. 在vue.config.js中使用

const path = require('path');
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
                path.resolve(__dirname, './src/style/params.less')
            ]
        }
    },
    ……
    其他配置
    ……
}

3. 重启项目

转自：https://blog.csdn.net/qq_40999917/article/details/107612686