Less use of global variables in Vue-Cli project

The beginning is trying to Vue2.X versions used Less global variables, but do not know for what reason has been given the wrong information about a class of non-css-loader installation errors, but upon my honor I installed! !

Later found Vue3.0 version is simpler to configure, so he upgraded advance Vue-cli3.0, probably version 3.11 (originally wanted 2.x and other common things are learned almost say)

Knowledge about the upgrade to Vue-cli3.0 see here: use the Vue-cli 3.0 build Vue project WHU_ the morning _Bin

(I mainly use the less, this will only write less how to use global variables, preprocessor also recall election less)

 

 Execution vue add style-resources-loader, why add about 3.0 seems to be because the default package manager is a yarn

Select less

 

New vue.config.js in the root directory

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
    }
  }
};

 

 This is the main part, put into your own directory file directory less

Then you can directly .less file directly using the configuration