How does VUE3 define less global variables

Less has been installed by default, so I won’t talk about it here.

(1) First we need to download a plugin dependency:

npm i style-resources-loader --save-dev 

 (2) Configure the content of the vue.config.js file in VUE3

 

 code:

 const path = require("path");

pluginOptions: { // third-party plugin configuration

    'style-resources-loader': {

      preProcessor: 'less',

      patterns: [

        path.resolve(__dirname, './src/assets/less/loginbtn.less')

      ]

    }

  }

Note: The path must have src

(3) Create a global variable file

 (4) Page usage variables

introduce

use