How to pack and detach sass? Introduction to packaging and separating sass methods

This article is about how to package and separate sass? Packaging and separation of sass methods introduced, there is a certain reference value, the need for friends can refer to, I hope to help you.

Foreword: Package.json is the package management profile in NPM, Webpack.config.js is the Webpack default profile, Webpack.plugin.js is the configuration I extracted to make webpack.config.js look clearer, gu The name idea is to extract the configuration of the plug-in.

Node_modules is the installation directory of the dependency package after the NPM install is executed.

Packaging and separating Sass

Install two packages under the project directory:

NPM Install–save-dev Node-sass

NPM Install–save-dev Sass-loader

If the installation is unsuccessful, you will need to remove the Node_modules directory, re-install the directory after NPM install and reinstall the two packages

To write the loader configuration:

Loader configuration should be in order {    test:/\.scss$/, use    : [{        loader: ' Style-loader '//Creates style nodes from JS strings    }, {        loader: ' css-loader '//translates CSS into CommonJS    }, {        loader: ' Sass-loader '//compiles sass to css
  }]}src/index.html insert a layer about SASS <div id= "Sasslearn" ></div>sass file: Create a new Src/css file in Sassle.scss $ Nav-color: #fff; #sassLearn {    $width: 100%;    Width: $width;    height:30px;    Background-color: $nav-color;}

Introduce Sassimport sass from './css/sassle.scss ' webpack after NPM run server in src/entry.js to see the effects (but at this point # Sasslearn is packaged into entry.js) modify useuse:extractTextPlugin.extract in the Sass configuration in Webpack-config.js ({    use:[{      Loader: ' Css-loader '    },{      loader: ' Sass-loader '    }],    fallback: ' Style-loader '  }

Delete the Dist folder Webpack to package, see the DIST/CSS/INDEX.CSS has #sasslearn style settings (that is, the sass and JS files have been separated)

NPM Run server opens a browser for viewing effects