Method steps for MPVUE to introduce Sass files globally

When the MPVUE project is initialized, the step of using Sass

1. Installation Dependence:

  NPM INSTALL SASS-LOADE-SASS --SAVE -dev  
2. In the .vue file, the Style node plus lang = “SCSS”, so you can develop SASS, no need to WebPack. Configure Loader in Base.config.js, WebPack automatically recognizes the .scss file, and the SCSS code in .vue.
When using SASS development, we often need to use unified variables in each page, and some methods, if this public resource does not perform special processing, we need @Import at each page. Come in to use, when the page is more, it will be a bit more powerful afterwards. Here is the step of how to handle the SASS global introduction SASS resource file under MPVue:

1. First need to install Sass-Resource-Loader (I have a version number 1.3.3):

NPM Install Sass-Resources-Loader –save-Dev

2. Then it is then found the build / utils.js file under the root directory, we added a Loader object
   
VAR SassResourceLoader = {Loader: ‘Sass-Resources-Loader’, Options: {Resources: [path.resolve (__ DIRNAME, ‘../src/assets/variables.scss’),]}}

In the resources array, it is put the path to the introduced SASS resource file.
   
3. Then rewrite the generateLoaders function

3. ]


// generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions, anotherLoader) {var loaders = [cssLoader, px2rpxLoader, postcssLoader] if (loader) { Loaders.push ({loader: loader + ‘-loader’, options: object.assign ({}, loaderoptions, {sourcemap: options.sourcemap})}}}}}}}}} (!! anotherloader) loadingers.push (anotherloader) // Extract CSS When That Option IS Specified // (WHICH IXTRACT) {Return ExtractTextPlugin.extract ({USE: Loaders, Fallback: ‘Vue-Style-Loader “})}}} else {return [‘Vue-style-loader’]. Concat (loadingers)}}

mpvue全局引入sass文件的方法步骤

It is mainly to change two places, just add one Parameters, add judgment:

Finally, we put custom plus loader plus:
   
The above is all the content of this article, I hope to help everyone, I hope 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