Vue-CLI 2. * Method Steps to Import Public LESS Files

In the new version of the Vue CLI 3, how to import public Less files have been clear in the document, but in the version of the 2. *, I don’t find relevant methods, netizens’ way is quite complicated. So I recommend it to you a very simple way.

First, the resource pre-processor style resource pre-processor in WebPack is used, so it is required:

  NPM I style-resources-loader -d  
Then you can find the implementation of the CSS preprocessor in the build / utils.js file:

 Function GenerateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS [cssLoader, postcssLoader]:? [cssLoader] if (loader) {loaders.push ({loader: loader + '-loader', options: Object.assign ({}, loaderOptions, {sourceMap: options.sourceMap})})} // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) {return ExtractTextPlugin.extract ({use: loaders, Fallback: 'Vue-Style-Loader'}}}}}}}}}}} // https://vue-loader.Vuejs.org/en/configurations/extract-css.html return {CSS: generateLoaders (), Postcss: generateLoaders (), Less: GenerateLoaders ('ness'), Sass: GenerateLoaders ('Sass', {IndentedSyntax: True}), SCSS: GenerateLoaders (' Sass'), Stylus: GenerateLoaders ('Stylus') STYL: GenerateLoaders ('Stylus')}}   Simply looks that it is needed to load the corresponding preprocessor, so only need When loading the Less file, add a STYLE RESOURES LOADER preprocessor to solve the problem, so simply add the following code to be added. 
IF (loader) {…} if (loader == ‘less’) {loadingers.push ({loader: ‘style-resources-loader’, Options : {patterns: path.resolve (__ DiRName, ‘../src/assets/config/*.less’)}})}

The above is all the contents of this article , I hope to learn from everyoneHelped, I also hope that everyone will support Tumi Clouds.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment