Question

我在使用extract-text-webpack-plugin和Webpack 3将样式表标记放在正确的位置时遇到了一些麻烦。

我的项目使用从CDN中提取的第三方样式表以及本地样式表包。我希望第三方样式覆盖我的本地包，但提取文本插件最后放置本地样式标记。这是一个问题，因为本地捆绑包含重置会破坏第三方组件。

我的index.html模板看起来像这样（释义）：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="www.mycdn.com/third_party.css">
  </head>
  ...

这是结果标记：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="www.mycdn.com/third_party.css">
    <link rel="stylesheet" type="text/css" href="local.css"> <!-- should be above third_party.css -->
  </head>
  ...

我搜索了extract-text-webpack-plugin和html-webpack-plugin的文档但没有得到任何结果。有谁知道如何用第三方样式覆盖我的本地样式？

对于更多背景知识，我的CSS配置如下所示：

    module: {
        rules: [
            ...
            {
                test: /\.s?css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader?sourceMap',
                        'resolve-url-loader',
                        'postcss-loader?sourceMap',
                        'sass-loader?sourceMap',
                    ],
                }),
            },
        ]
    }

我也在使用HtmlWebpackPlugin：

    plugins: [
        ...
        new ExtractTextPlugin('local.css'),
        new HtmlWebpackPlugin({
            template: '../webpack/template.html',
        }),
    ],

Webpack提取文本插件 - 选择样式表标签的位置

0 个答案: