「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) =&amp;gt; {
rule.oneOf(type)
.use('style-resources-loader')
.loader('style-resources-loader')
.options({ patterns });
});

}
module.exports = {
chainWebpack: (config) =&gt; {
    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'),
        ],
    },
},

};