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

【问题标题】：Compiling a .less file to a specific .css file using webpack使用 webpack 将 .less 文件编译为特定的 .css 文件
【发布时间】：2017-09-06 12:32:32
【问题描述】：

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

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

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

【问题讨论】：

标签： css webpack less

【解决方案1】：

自己找到了解决方案。以下webpack.config.js sn-p 对我有用：

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 })
        ]
    };
};

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

【讨论】：