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-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',
        }),
    ],
4

0 に答える 0