「Web 前端」Vue CLI 配置 Less 全局变量

Frost-ZX

参考资料

预先准备

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

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

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

方式一、手动配置

安装 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) => {
        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'),
            ]
        });

    },
};

方式二、使用插件

安装 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'),
            ],
        },

    },
};