1

In my fonts.scss source file (same result if this is a pure CSS import)

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

After npm run build which runs webpack, it's rendered as this:

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

So the file path is broken, rendering as [object Object] rather than the path to the file.

It's a Roots Sage 9.0.10 theme for WordPress, using webpack. Here are some key dependencies:

"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",

The issue seems to be limited to relative paths. When I put in an absolute path, it is fine - ie. url(/wp-content/theme/resources/assets/fonts/social-icons.woff) but this isn't great for production as I would like all references to be to the dist directory.

Has anyone experienced this, and if so, was there a solution?

codewithfeeling
  • 6,236
  • 6
  • 41
  • 53
  • That is really weird.. Icould only find this related : https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module, I wonder if you use SCSS would it result the same.. that css-loader is curious dep – Pogrindis Feb 25 '21 at 13:46
  • I suspect you're going to have to configuer your webpack config.. https://webpack.js.org/loaders/css-loader/#assets – Pogrindis Feb 25 '21 at 13:49
  • @Pogrindis I am actually using SCSS in this case – codewithfeeling Feb 25 '21 at 13:59
  • maybe try updating the css-loader and making sure its a recent version, `5.0.2` is the last release.. &/ Try removing the esModule in your webpack config : `esModule: false`. I can't reproduce it locally im afraid. – Pogrindis Feb 25 '21 at 14:10

0 Answers0