1

fonts.scssソース ファイル内 (これが純粋な CSS インポートの場合と同じ結果)

@font-face {
  font-family: "SocialIcons";
  src: url("../fonts/social-icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

その後npm run build、webpack を実行すると、次のようにレンダリングされます。

@font-face {
  font-family: "SocialIcons";
  src: url([object Object]) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

そのため、ファイル パスは壊れており、ファイルへ[object Object]のパスではなくレンダリングされます。

これは、WordPress 用の Roots Sage 9.0.10 テーマで、webpack. 主な依存関係を次に示します。

"css-loader": "^0.28.11",
"file-loader": "^6.2.0",
"node-sass": "^5.0.0",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "^3.1.2",
"sass-loader": "~6.0",
"style-loader": "^0.23.1",
"url-loader": "^4.1.1",
"webpack": "~3.10.0",

問題は相対パスに限定されているようです。絶対パスを入力すると、問題ありません。しかし、すべての参照をディレクトリurl(/wp-content/theme/resources/assets/fonts/social-icons.woff)にしたいので、これは本番環境には適していません。dist

誰かがこれを経験しましたか? もしそうなら、解決策はありましたか?

4

0 に答える 0