vue 全局调用变量

vue.config.js :

npm install style-resources-loader

module.exports = {
//站点标题
    chainWebpack: (config) => {
        config.plugin("html").tap((args) => {
            args[0].title = "标题";
            return args;
        });
    },
//使用less
    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                },
            },
        },
    },
//全局调用antd的样式和变量
    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: ["node_modules/ant-design-vue/dist/antd.less"],
        },
    },
}

 或

// vue.config.js
const fs = require('fs')

module.exports = {
    css: {
        loaderOptions: {
            less: {
                modifyVars: {
                    "text-color": "rgba(0, 0, 0, .65)",
                    "primary-color": "#f5222d"
                },
                globalVars: getLessVariables('node_modules/ant-design-vue/dist/antd.less'),
                javascriptEnabled: true,
            },
        },
    },
};

// 读取less全局变量文件
function getLessVariables(file) {
    var themeContent = fs.readFileSync(file, 'utf-8')
    var variables = {}
    themeContent.split('\n').forEach(function (item) {
        if (item.indexOf('//') > -1 || item.indexOf('/*') > -1) {
            return
        }
        var _pair = item.split(':')
        if (_pair.length < 2) return
        var key = _pair[0].replace('\r', '').replace('@', '')
        if (!key) return
        var value = _pair[1].replace(';', '').replace('\r', '').replace(/^\s+|\s+$/g, '')
        variables[key] = value
    })
    return variables
}