webpack--打包scss

1.npm install sass-loader node-sass --save-dev

2.scss通俗理解相當於sass升級版，所以依賴的插件還是sass-loader node-sass

  

sass寫法，換行縮進

#sidebar
  width: 30%
  background-color: #faa

scss寫法，中括號，分號

#sidebar {
  width: 30%;
  background-color: #faa;
}

scss寫法與css寫法更相近（先這么理解吧）

3.配置文件

module: {
        rules:[
            {
                //轉換es6語法
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:[
                            "env"
                        ]
                    }
                },
                exclude:/node_modules/ //排除轉換目錄
            },{
                test:/\.css$/,
                /*
                use:[{
                    loader:'style-loader/url' //使用style-loader進行處理，位置必須在css-loader前面
                },{
                    loader:'css-loader' //使用css-loader進行處理
                }]
                //use:['style-loader','css-loader'] // 此處也可以這樣寫
                */
               use:ExtractTextWebpackPlugin.extract({
                    fallback: {// 這里表示不提取的時候，使用什么樣的配置來處理css
                        loader: 'style-loader',
                        options: {
                            singleton: true // 表示將頁面上的所有css都放到一個style標簽內
                        }
                    },
                    use: [ // 提取的時候，繼續用下面的方式處理
                        {
                            loader: 'css-loader',
                        }
                    ]
               })
            },{
                test: /\.scss$/, 
                use: ExtractTextWebpackPlugin.extract({
                    use:['css-loader','sass-loader']
                })
            }
        ],
        
    },