时间戳

首页 > 解决方案 > 使用 webpack 时 CSS 文件路径呈现为 [Object object]

css - 使用 webpack 时 CSS 文件路径呈现为 [Object object]

问题描述

在我的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目录。

有没有人遇到过这种情况，如果有，有解决办法吗？

标签： csswebpackroots-sage

解决方案

推荐阅读