vue/cli 4.x引入带变量的全局less公共样式

**步骤1：**

使用vue安装插件的方法：

vue add style-resources-loader

**步骤2：**

然后会有一个让选择语言的选项CSS Pre-processor?，选择当前应用的语法，scss、sass、stylus和less，我目前选择的是less

**步骤3：**

在vue.config.js中会自动生成如下代码：

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: []
        }
    }
}

根据自己项目的公共样式路径做如下修改：

const path = require("path");
function resolve(dir){    
    return path.join(__dirname,dir)  //path.join(__dirname)设置绝对路径
}
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, "./src/common/baseStyle.less")]
        }
    }
}

然后重启一下项目，运行 npm run serve 就可以了；

**但是**如果公共样式文件引入了字体图标，

@medium: #f8bd4c;
@high: #e8748c;
@base-green: #60cb65;

@import "../assets/font/iconfont.css";

@font-face {
  font-family: 'fzzhjt';
  src: url('../assets/font/fzzhjt.TTF')
}

会报错：

解决方案：

改为在APP.vue文件下全局引入字体图标

<template>
    <div id="app">
        <router-view v-wechat-title="$route.meta.title"></router-view>
    </div>
</template>

<script>

    export default {
        name: 'App',
        components: {}
    }
</script>

<style lang="less">
    @import "./assets/font/iconfont.css";

    @font-face {
        font-family: 'fzzhjt';
        src: url('./assets/font/fzzhjt.TTF')
    }

    html, body {
        height: 100%;
        width: 100%;
        position: relative;
        margin: 0;
        padding: 0;
        font-family: "Microsoft Yahei";
    }
</style>

至此，解决问题