webpack-- packaged scss

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

2.scss popular understanding of an upgraded version of the equivalent of sass, so dependent plug-ins or sass -loader the Node -sass

  

sass written, line indentation 

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

SCSS written, brackets, semicolons 

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

scss css writing and writing more similar (to so understand it)

3. Profiles

Module: { 
        rules: [ 
            { 
                // convert es6 syntax 
                the Test: / (. \ JSX | \ .js) $ / , 
                use: { 
                    Loader: " babel-Loader " , 
                    Options: { 
                        the Presets: [ 
                            " env " 
                        ] 
                    } 
                } , 
                the exclude: / the node_modules / // exclude conversion directory 
            }, { 
                Test: /\.css$/ ,
                 / * 
                use: [{
                    loader: 'style-loader / url ' // processed using style-loader, the position must precede css-loader 
                }, { 
                    Loader: 'css-loader' // use css-loader processes 
                }] 
                // use: [ 'style-loader', 'css -loader'] // herein may also be written 
                * / 
               use: ExtractTextWebpackPlugin.extract ({ 
                    fallback: { // here means no extraction when, what kind of configuration used to process CSS 
                        Loader : ' style-Loader ' , 
                        Options: { 
                            Singleton: to true  // represents css on all pages are placed within a style tag 
                        } 
                    },
                    use: [// extraction time, processing continues in the following manner 
                        { 
                            Loader: ' CSS-Loader ' , 
                        } 
                    ] 
               }) 
            }, { 
                Test: /\.scss$/ , 
                use: ExtractTextWebpackPlugin.extract ({ 
                    use: [ ' css- Loader ' , ' Sass-Loader ' ] 
                }) 
            } 
        ], 
        
    },