如何使用 webpack 从 .less 中提取 common.css？

Question

我有一些条目有自己的 .less 样式我想将常见的 css 提取到 common.css

entry: {
    index: ['./client/js/index.js'],
    login: ['./client/js/login.js']
},
module: {
    loaders: [
        ....
        {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')},
        {test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less')}
        ....
    ]
},
plugins: [
    new ExtractTextPlugin('css/[name].css'),
    new webpack.optimize.CommonsChunkPlugin({
        minChunks: 2,
        name: 'common'
    })
]

但如果我使用 .less 文件，我无法生成 common.css

如果我使用 .css 文件 - 生成 common.css！

如何从 .less 中获取 common.css？

Answer 1

您的 webpack.optimize.CommonChunkPlugin 设置应该是 "commons"、"commons.js"，例如：

// ...
module.exports = {
    // ...
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
        new ExtractTextPlugin("[name].css")
    ]
}

如何使用 webpack 从 .less 中提取 common.css？

How to extract common.css from .less with webpack?

less

webpack