MENU

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

2021 年 07 月 09 日 • 开发

参考资料

预先准备

  1. 若项目正在运行,需要先停止。

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

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

方式一、手动配置

  1. 安装 style-resources-loader

    npm install style-resources-loader --save-dev
  2. 修改项目根目录下的 vue.config.js 文件(若无则创建)。

    以使用 src/assets/css/global.lesssrc/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'),
                ]
            });
    
        },
    };

方式二、使用插件

  1. 安装 style-resources-loader 插件。

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

    以使用 src/assets/css/global.lesssrc/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'),
                ],
            },
    
        },
    };
最后编辑于: 2021 年 12 月 26 日
返回文章列表 打赏
本页链接的二维码
打赏二维码