1. NPM install less

npm install less less-loader --save
Copy the code

Sass-resources-loader is also required for global use

   npm i sass-resources-loader
Copy the code

3. After installing sass-Resources-Loader, you need to configure webPack

Go to the build/utils.js file, add the global less function to the cssLoaders function, and copy the following code

Function lessResourceLoader() {var loaders = [cssLoader, 'less-loader', {loader: 'sass-resources-loader', options: { resources: [/ / define a global variable path to the file path. The resolve (__dirname, '.. / SRC/assets/style/main less '),]}}]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }Copy the code

4. Replace the less function with lessResourceLoader() in return (this is the name you used to write the function, you can name it any way you like)

Return {CSS: generateLoaders(), postcss: generateLoaders(), less: lessResourceLoader(), // after // less: GenerateLoaders ('less'), // sass: generateLoaders('sass', {indentedSyntax: true}), SCSS: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }Copy the code

5, done, rerun can, in less file can write their own global style

@h: 100px; @red: red; @yellow: yellow; @pink: pink; @ 333: # 333;Copy the code