vue-cli3定義less全局變量

最開始是在Vue2.X版本中嘗試使用Less全 局變量的，但是不知道因為什么原因一直報錯，錯誤信息大概是未安裝css-loader一類的錯誤，但天地良心我裝了！！

后面發現Vue3.0版本中配置要簡單一些，於是就提前升級了Vue-cli3.0，大概是3.11的版本（原本想等2.x常用的東西都學的差不多了再說）

關於升級到Vue-cli3.0的相關知識請看這里：使用Vue-cli 3.0搭建Vue項目 WHU_凌晨_Bin

（我主要用的是less，這篇就只寫怎么使用less全局變量，預處理器也記得選less）

 

 

 

 執行 vue add style-resources-loader ，關於為什么是add好像是因為3.0默認的包管理器是yarn

選擇less

 

在根目錄下新建vue.config.js

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/styles/test.less")]
    }
  },
  lintOnSave: true,
  devServer: {
    overlay: {
      warnings: true,
      error: true
    }
  }
};

 

 

 

 

 主要是這一部分，要把目錄改成你自己less文件的目錄

然后就可以直接在.less文件中配置后直接使用了