vue cli3.0及以上，全局less文件引入

背景：在開發中我們常常需要引入全局的樣式文件，來定義一些通用的樣式和變量，比如字體，顏色等；而不想使用每次使用@import。

步驟：

1、vue cli3.0以上需要新建vue.config.js文件

2、安裝dev依賴"style-resources-loader"

3、在"/src/assets/css/"路徑下添加自定義less文件，在vue.config.js粘貼以下內容

const path = require("path");

module.exports = {
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
};

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/assets/css/common.less")],
    });
}