Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイルタグ内には、背景画像を使用する次の CSS コードがあります。

背景画像: url("../assets/img/icon_add.png");

webpackのcss-loaderの解析構成は次のとおりです。

{
        テスト: /\.(css|less)$/,
        除外: path.resolve(__dirname, 'node_modules'),
        使用法: ['style-loader', 'css-loader', 'less-loader']
    }

パッケージ化後、dist ディレクトリに css ファイルが見つかりません。これは、css ファイルが js ファイルに変換されるためです。

この時点でプロジェクトを起動すると、背景画像が正しくインポートされ、正常に表示できるようになります。

2 CSSファイルを別のファイルディレクトリに抽出する

mini-css-extract-plugin を使用して、CSS ファイルを dist ディレクトリの下の css ディレクトリに個別に抽出します。

2.1 ローダーの設定

{
        テスト: /\.(css|less)$/,
        除外: path.resolve(__dirname, 'node_modules'),
        使用: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }

2.2 プラグインの設定

新しい MiniCssExtractPlugin({
            ファイル名: 'css/[name][contenthash].css',
        })

パッケージ化後、distディレクトリ構造は次のようになります。

画像はルートディレクトリ (dist) にありますが、CSS ファイルは dist/css/ ディレクトリにあることがわかります。次に、パッケージ化された CSS ファイルが画像パスを参照する方法を見てみましょう。

2.3 パッケージングの結果

背景画像: url(bb65a86a2fe7669e483a56b970bea421.png);

dist/css ディレクトリに bb65a86a2fe7669e483a56b970bea421.png 画像がないことがわかります。そのため、画像が正しく表示されません。理想的な状況は

背景画像: url(../bb65a86a2fe7669e483a56b970bea421.png);

3つの解決策

ローダーの設定を次のように変更します

{
        ローダー: MiniCssExtractPlugin.loader、
        オプション:
            // パッケージ化されたルート パスに対する現在の CSS ファイルの相対パス dist publicPath: '../'
        }
    }, 'css-loader', 'less-loader'

要約する

CSS ファイルを分離すると、CSS 背景画像パスエラーが発生します。解決策の核となるのは、publicPath の値を構成することです。publicPath の値は、ルートディレクトリを基準とした、CSS ファイルが配置されているファイルディレクトリの相対パス値です。たとえば、ルートパスは / で、css ファイルが配置されているディレクトリは /css/ なので、相対パスは次のようになります。

予期せぬ問題

webpack のパッケージ化後に css ファイルが bundle.js ファイルに混合されるのに、画像が bundle.js に混合されないのはなぜですか? ? ?

これで、webpack パッケージング CSS 背景画像パスの問題に対する完璧な解決策に関するこの記事は終わりです。より関連性の高い webpack パッケージング CSS 背景画像パスのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Dockerイメージを構築する2つの方法

>>: HTML リストタグ dl、ul、ol の使用例