Webpack Compiling less/scss files

1, install the plug-in

Handling Less:

NPM Install Less-loader--save-dev

Handling SASS:

NPM Install Sass-loader--save-dev

2. Project directory:

Layer.less is:

. Layer {    width: 600px;     height: 200px;     background-color: Green;     > div{        width: 400px;         Height: 200px;         background-color: red;    }     . Flex{        display: flex;    } }

Layer.js is:

Import './layer.less '; // import TPL from './layer.html '; function layer () {    return  {        name:' layer ',        tpl:tpl    Default layer;

3, webpack.config.js configuration file (to compile less as an example)

varHtmlwebpackplugin = require (' Html-webpack-plugin ')); Module.exports={entry:'./src/app.js ', Output: {path: __dirname+ '/dist ', FileName:' Js/[name].js '}, module: {loaders: [{test:/\.js$/,                //The following directory does not handleExclude:/node_modules/,                //only the following directories are processedInclude:/src/, Loader:"Babel-loader",                //The configured target Runtime Environment (environment) automatically enables the required Babel plug-insquery: {presets: [' Latest ']                }            },            //CSS handles this piece{test:/\.css$/, use: [' Style-loader ', {loader:' Css-loader ', options: {//Support @important introduction of CSSImportloaders:1}}, {loader:' Postcss-loader ', Options: {plugins:function() {                                return [                                    //be sure to write in front of require ("autoprefixer"), otherwise require ("Autoprefixer") is invalidRequire (' Postcss-import ') (), Require ("Autoprefixer")({                                        "Browsers": ["Android >= 4.1", "IOS >= 7.0", "IE >= 8"]                                    })                                ]                            } }                    }                ]            },             //lessdeal with this piece {test:/\.less$/, use: [' Style-loader ', {loader:' Css-loader ', options: {//Support @important introduction of CSSImportloaders:1}}, {loader:' Postcss-loader ', Options: {plugins:function() {                                return [                                    //be sure to write in front of require ("autoprefixer"), otherwise require ("Autoprefixer") is invalidRequire (' Postcss-import ') (), Require ("Autoprefixer")({                                        "Browsers": ["Android >= 4.1", "IOS >= 7.0", "IE >= 8"]                                    })                                ]                            } }                    },                    ' Less-loader ']}]}, plugins: [Newhtmlwebpackplugin ({Template:' Index.html ', FileName:' Index.html '        })    ]}

Note: Postcss-loader after Css-loader, before Less-loader.

4. Perform compilation & View Effects

NPM Run Webpack

Webpack Compiling less/scss files