JavaScript - Gulp-clean-css コンパイル後の URL の問題

Question

gulp を使用して CSS を圧縮すると問題が発生します。ファイル ディレクトリは次のとおりです:

リーリー

main.css の特定のスタイル:

リーリー

インポート.css：

リーリー

次に、gulp でコンパイルします:

リーリー

現在存在する 1 つの問題は、コンパイルされた CSS がすべて import.css 内にあることです。現時点では、URL の正しいパスは
url('../images/header.png') である必要がありますが、まだ ('../../images/header.png') ですが、対応する画像リソースが見つかりません。

の後に、src で絶対パス url('/static/src/images/header.png') を使用しますが、コンパイル後の正しい URL は url('/static/dist/images/header.png となるはずです) ')。

gulp-clean-css を使用するときに URL を正しく切り替えるにはどうすればよいですか?

＃＃＃ありがとう。

Answer 1

gulp-clean-css は内部で clean-css を使用する単なる gulp プラグインです。そのため、clean-css プロジェクトのホームページにアクセスして解決策を見つけることができます:

https://github.com/jakubpawlo...

「リモート @imports を正しく処理する方法?」の章に関連する解決策が記載されていますが、これは一般的な問題のようです。

リモート @import ステートメントをインライン化するには、リモート アセットの取得は非同期
操作であるため、minify メソッドに
コールバックを提供する必要があります。例:

リーリー

コールバックを提供しない場合、リモート @importsはそのまま
のままになります。

パラメータを追加します:

リーリー