0

我在使用extract-text-webpack-pluginWebpack 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-pluginand 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',
        }),
    ],
4

0 回答 0