ExtractTextPlugin 附加而不是覆盖

Question

我在一个项目中使用 ExtractTextPlugin 进行 SCSS 提取，该项目在主 SCSS 文件夹（对于普通 SCSS）和组件 Vue 文件中都有样式。问题是，当我尝试写入一个固定的 css 输出文件时，只创建了一个提取，而我希望将两个提取附加到同一个 css 文件。因为 Vue 的作用域样式意味着样式应该已经作用于特定组件，所以我不想为不同的页面包含单独的样式表。有没有办法让 ExtractTextPlugin 将多次提取的结果附加到同一个文件？

我的webpack配置如下：

ExtractTextPlugin 的定义：

const extractSass = new ExtractTextPlugin({
    filename: "css/main.css",
    allChunks: true,
});

装载机：

rules: [
{
    test: /\.Vue$/,
    include: /Views/,
    loader: 'vue-loader',
    options: {
        loaders: {
            scss: extractSass.extract({
                use: ['css-loader', 'sass-loader'],
                fallback:
                    'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
            })
        }
    }
},
{
    test: /\.(scss|css)$/,
    exclude: /node_modules/,
    use: extractSass.extract({
        use: [
            {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: { sourceMap: true }
            }],
        // use style-loader in development
        fallback: "style-loader"
    })
},

插件定义：

plugins: [
   extractSass,
   ...

Answer 1

如果你看 documentation 它在那里表示为警告。

:warning: ExtractTextPlugin generates a file per entry, so you must use [name], [id] or [contenthash] when using multiple entries.

所以基本上没有办法在不同的条目文件中合并两个 css，包括 common 和 vendor 以防万一。

您可以尝试在捆绑过程中使用此https://github.com/jtefera/merge-text-webpack合并多个css。

ExtractTextPlugin 附加而不是覆盖

ExtractTextPlugin append instead of overwrite

webpack

vue-loader