webpack自动编译sass,less和stylus

用的是webpack2

webpack.config.js :

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const config = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
   output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
 
    module: {
        rules: [
            
            {
                test: /\.(sass|scss|css)$/,
                loader: ExtractTextPlugin.extract({
                        //fallbackLoader: 'style-loader',
                        loader: "css-loader!sass-loader",
                }),
            },
            {
                test: /.less$/,
                loader: ExtractTextPlugin.extract({
                       // fallbackLoader: 'style-loader',
                        loader: "css-loader!less-loader",
                }),
            },
            {
                test: /.styl$/,
                loader: ExtractTextPlugin.extract({
                       // fallbackLoader: 'style-loader',
                        loader: "css-loader!stylus-loader",
                }),
            },
            
            
            
        ],
    },
    plugins: [
        new ExtractTextPlugin('app.css'),        
        ]
 
}

module.exports = config

--------------------------------

然后在main.js可以：

import styles from './app.scss';
import styles from './app.less';
import styles from './app.styl';

--------------------------

再 webpack --watch 就可以自动编译了。

前提:

先全局安装webpack
再在项目里局部安装webpack

再装

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

npm install --save-dev css-loader
npm install --save-dev style-loader

npm install --save-dev less-loader less

npm install stylus-loader stylus --save-dev

-----------------