Rewrite assets paths in CSS/SASS/SCSS in webpack

Question

I'm upgrading from Webpack 4 to Webpack 5, here's my config file diff: https://diffy.org/diff/5599db6178258

I have a CSS file assets/fonts/inter.css that contains font definitions like:

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 100;
  font-display: swap;
  src: url("Inter-Thin.woff2?v=3.15") format("woff2"),
       url("Inter-Thin.woff?v=3.15") format("woff");
}

When this file is included in a SCSS or JS file, those urls used to get rewritten to assets/fonts/Inter-Thin.woff2?v=3.15, but are now untouched.

I tried using resolve-url-loader but it doesn't do anything. How do I get urls to be rewritten to the right path?

chenxsan chenxsan · Accepted Answer · 2021-07-09T23:51:06

Since you're upgrading to webpack 5.

either url-loader or file-loader are deprecated for webpack 5, so prefer to use the built-in Asset Modules to replace them as they might not be compatible with the latest webpack 5
you can customize the output path and filename for targeted assets with output.assetModuleFilename

Rewrite assets paths in CSS/SASS/SCSS in webpack

1 Answers