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 它在那里表示警告。

：警告：ExtractTextPlugin为每个条目生成一个文件，因此在使用多个条目时必须使用[name]，[id]或[contenthash]。

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

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

ExtractTextPlugin附加而不是覆盖

1 个答案: