webpack/css-loader

Upgrade from version from 5.2.7 to 6.7.3 breaks import fonts

Closed this issue · 3 comments

raphaelguimaraeszup commented

Bug report

I did the upgrade from version from 5.2.7 to 6.7.3 and the fonts that I've imported by @import or url doesn't work. Any other change on my project was made, like change folder name, file name or something like this, I only upgraded the lib and I had the following result bellow.

Actual Behavior

This is how my code was working fine with the version 5.2.7:

@import '~material-icons-font/material-icons-font.css';

@font-face {
  font-family: 'itau_icons';
  src: url('./fonts/Itau_Icons.ttf') format('truetype'),
    url('./fonts/itau_icons-webfont.woff2') format('woff2'),
    url('./fonts/itau_icons-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

All fonts rendering fine:

image

And this is my configuration on webpack.config.js:

...
{
    test: /\.css$/i,
    use: ['style-loader', 'css-loader']
},
{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: ['file-loader']
}

Expected Behavior

After upgrade to 6.7.3, this is the result:

image

How Do We Reproduce?

Upgrade css-loader version from 5.x.x to 6.7.3 or just use a code like my example to check the result.

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.44 GB / 15.73 GB
  Binaries:
    Node: 16.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.78)
    Internet Explorer: 11.0.19041.1566
  Packages:
    babel-loader: ^8.2.2 => 8.2.3
    bundle-loader: ^0.5.6 => 0.5.6
    css-loader: ^6.7.3 => 6.7.3
    dotenv-webpack: ^7.1.0 => 7.1.0
    dts-loader: ^0.1.2 => 0.1.6
    file-loader: ^6.2.0 => 6.2.0
    filemanager-webpack-plugin: ^7.0.0-beta.0 => 7.0.0-beta.0
    html-webpack-plugin: ^5.3.1 => 5.5.0
    style-loader: ^1.3.0 => 1.3.0
    url-loader: ^4.1.1 => 4.1.1
    webpack: ^5.75.0 => 5.75.0
    webpack-cli: ^5.0.1 => 5.0.1
    webpack-dev-server: ^4.11.1 => 4.11.1
    webpack-remote-types-plugin: ^0.2.5 => 0.2.7
raphaelguimaraeszup commented

And this is my folder structure:

image

I've put the source on a CDN and it's up and running, but for this project I'd like to keep my sources in the project itself. What changed from version 5 to 6, which started to not see the path that was correct? Is there any extra configuration to be done in my webpack.config?

alexander-akait commented

Please don't use file-loader, it is deprecated, just remove this and everything should work, it was described in changelog

  • 👍1
alexander-akait commented

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!