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

Posted 2023-03-15

参考技术A 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-loaderless

1.1. 方法1：分开安装

安装style-resources-loader

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

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

安装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 --save-dev

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/globel.less')

                        ]

                   

                ,

                        ……

                    其他配置

                        ……

    

注意：如果在安装时项目中已经有了 vue.config.js 文件，需要在安装第三方包之前先删除，再重新创建

3. 重启项目

npm run serve