使用webpack将.less文件编译为特定的.css文件

Question

我想使用webpack将style.less文件编译为module.css文件。

我发现https://github.com/webpack-contrib/less-loader是一个非常受欢迎的软件包，但它似乎对我不起作用，因为我真的需要创建module.css文件。

那么我怎么能用webpack做到这一点？

Answer 1

自己找到解决方案。以下webpack.config.js代码段对我有用：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = function(env) {
    return {
       ...
        module: {
            loaders: [
                {
                    test: /.*\.less$/,
                    loader: ExtractTextPlugin.extract({
                        loader:[ 'css-loader', 'less-loader' ],
                        fallbackLoader: 'style-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin({ filename: 'module.css', disable: false, allChunks: true })
        ]
    };
};

其中...是配置其他部分的占位符，此处不相关。