【Vue】插件:五、style-resources-loader 配置全局less变量

不念不忘少年蓝@ 2023-10-11 14:17 42阅读 0赞

### 1. 插件安装 ###

--------------------

**前提：附属插件安装**  
确保已安装less、less-loader

> less官方安装及使用文档：[https://www.npmjs.com/package/less][https_www.npmjs.com_package_less]

npm i less

> less-loader官方安装及使用文档：[https://www.npmjs.com/package/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][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][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预处理器**
    
    ![format_png][]
    
    选择预处理器

### 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. 重启项目 ###

--------------------

npm run serve

[https_www.npmjs.com_package_less]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fless
[https_www.npmjs.com_package_less-loader]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fless-loader
[https_www.npmjs.com_package_style-resources-loader_resolveurl]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fstyle-resources-loader%23resolveurl
[https_www.npmjs.com_package_vue-cli-plugin-style-resources-loader]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-cli-plugin-style-resources-loader
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTUzOTM1MS02ZTYzYTEzYTM0ZmZlZTgyLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzY4NC9mb3JtYXQvd2VicA?x-oss-process=image/format,png