How does webpack configure the loading of sass modules? (detailed explanation)

The content of this article is to introduce how webpack configures the loading of sass modules? (detailed explanation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For projects managed by webpack, we hope to use sass to define styles. In order to compile normally, the following configuration is required. I won't talk about getting started with webpack here. For introductory articles, I recommend this "Getting Started with Webpack".

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

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

Of course, if you use styles, css-loader and style-loader are also necessary Dependent packages, if not installed, can be installed similar to the above method

• css-loader enables you to use methods like @import and url(...) to implement the require() function;

• style-loader adds all calculated styles to the page;

The combination of the two allows you to embed style sheets into webpack in the packaged JS file.

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

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
    ....
    module: {
        loaders: [
            //解析.css文件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", 'css')
            },
            //解析.vue文件
            {
                test: /\.vue$/,
                loader: 'vue'
            }, 
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }
        ]
    },
    //.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略
    vue: {
        loaders: {
            js: 'babel', 
            css: ExtractTextPlugin.extract("css"),
            sass: ExtractTextPlugin.extract("css!sass")            
        },
    },
    plugins: [
        new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
    ]
    ....
}

The use of sass is as follows, for example:

• To introduce external styles, the following two writing methods can be used:

import '../../css/test.scss'
require('../../css/test2.scss');

• Use

<style lang="sass">
     //sass语法样式
</style>

in the .vue file

The above is the detailed content of How does webpack configure the loading of sass modules? (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!