「Web 前端」Vue CLI 配置 Less 全局变量-工具盒子

参考资料 {#menu_index_1}

预先准备 {#menu_index_2}

若项目正在运行，需要先停止。

安装依赖和修改 vue.config.js 需要重新启动项目以生效。
安装 less 和 less-loader。

若已安装则可忽略（例如使用 Vue CLI 创建项目时选择了 Less CSS 预处理器）。
```
npm install less less-loader --save-dev
# 可以简写为
npm i less less-loader -D
```

方式一、手动配置 {#menu_index_3}

安装 style-resources-loader。

npm install style-resources-loader --save-dev

修改项目根目录下的 vue.config.js 文件（若无则创建）。

以使用 src/assets/css/global.less 和 src/assets/css/variables.less 文件为例。

const path = require('path');

function addStyleRes({ config = null, processor = '', patterns = \[\] }) {
if (!config) {
return;
}


    const rule = config.module.rule(processor);
    const types = ['normal', 'normal-modules', 'vue', 'vue-modules'];

    types.forEach((type) =&gt; {
        rule.oneOf(type)
            .use('style-resources-loader')
            .loader('style-resources-loader')
            .options({ patterns });
    });




}


module.exports = {
chainWebpack: (config) =\> {


        addStyleRes({
            config,
            processor: 'less',
            patterns: [
                path.resolve(__dirname, 'src/assets/css/global.less'),
                path.resolve(__dirname, 'src/assets/css/variables.less'),
            ]
        });

    },



`};`

方式二、使用插件 {#menu_index_4}

安装 style-resources-loader 插件。

注意：
安装该插件时会自动修改 vue.config.js 文件，建议先使用 Git 暂存或提交当前的更改后再安装。
安装过程中可能会弹出 CSS 预处理器选择菜单，根据实际情况选择即可。
```
vue add style-resources-loader
```

根据需要修改 vue.config.js 文件。

以使用 src/assets/css/global.less 和 src/assets/css/variables.less 文件为例。

const path = require('path');

module.exports = {
pluginOptions: {


        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, 'src/assets/global.less'),
                path.resolve(__dirname, 'src/assets/variables.less'),
            ],
        },

    },



`};`