Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to configure the loading of sass module in webpack". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to configure the loading of the sass module by webpack"!

In order to use sass, we need to install the dependency package for sass

/ / under the project, run the following command line

Npminstall--save-devsass-loader

/ / because sass-loader depends on node-sass, you need to install node-sass

Npminstall--save-devnode-sass

Of course, using styles, css-loader and style-loader are also necessary dependent packages. If you don't have them, you can install them in a way similar to the above.

Css-loader enables you to use things like @ import and url (…) To realize the function of require () based on the

Style-loader adds all the calculated styles to the page

The combination of the two enables you to embed the stylesheet in the JS file packaged by webpack.

The following is part of the configuration of the webpack.config.js file:

The varExtractTextPlugin=require ('extract-text-webpack-plugin'); / / css style is separated from the js file, and the extract-text-webpack-plugin dependency package needs to be installed from the command line

Module.exports= {

....

Module: {

Loaders: [

/ / parse the .css file

{

Test:/\ .css $/

Loader:ExtractTextPlugin.extract ("style", 'css')

}

/ / parse the .vue file

{

Test:/\ .vue $/

Loader:'vue'

}

/ / parse the .scss file, load the sass file introduced with import or require, and. The declared internal style is loaded

{

Test:/\ .scss $/

Loader:ExtractTextPlugin.extract ("style", 'CSSSAS') / / plugins separated from styles are used here. If you don't want to separate them, you can simply write loader _

}

]

}

/ / configuration of the .vue file, the following is to use the ES6 syntax in the .vue file (babel-related dependent packages must be installed), and to extract styles that use css or sass syntax, which can be ignored if not needed

Vue: {

Loaders: {

Js:'babel'

Css:ExtractTextPlugin.extract ("css")

Sass:ExtractTextPlugin.extract ("CSSSAS")

}

}

Plugins: [

NewExtractTextPlugin ("style.css") / / the extracted styles are placed in the style.css file

]

....

}

The use of sass is as follows, for example:

With the introduction of external styles, the following two writing methods can be used:

Import'../../css/test.scss'

Require ('.. /.. / css/test2.scss')

Used in .vue files

/ / sass syntax style

At this point, I believe you have a deeper understanding of "how to configure the loading of the sass module in webpack". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.