Webpack configuration: Less file packaging and separation

one, less file packaging and separation

1. To use less, first use NPM to install less services, and you need to install Less-loader to use for packaging.

NPM Install less  --save-devnpm install Less

2. Configure in Module

{    /\.less$/, use    : [{        "style-loader"     },{         "css-loader"     },{        "less-loader "     }]}

3, write a div in HTML, create a new less file in the CSS

<div id="leesbox"></div>

@base: Yellowgreen; #leesBox {    width:300px;    height:200px;    Background: @base;}

4, introduced into the Index.js

 from ' ./css/black.less ';

5. Use Webpack to package, enter NPM run server to view the effect

6, less separation

Second, Sass file packaging and Separation

1, installation: Because the sass-loader depends on the node-sass, so you need to install the Node-sass

NPM install node-sass--save-dev npm install sass

The other is basically the same as the less installation

Webpack configuration: Less file packaging and separation