since css-loader v6 the material icons is not working anymore

[p3x-robot]

• Operating System: Linux Mint
• Node Version: 14
• NPM Version: 6
• webpack Version: 5
• css-loader Version: 6

Expected Behavior

In before css-loader v6 (eg v5) material icons are showing

css-loader v5 picture:

Actual Behavior

Code

// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).
    {
        test: /\.(scss|css)$/,
//      exclude: [`${cwd}/src/assets/ngivr.scss`],
        use: [
            {
                loader: MiniCssExtractPlugin.loader,
                options: {
                },
            },
            'css-loader',
            'sass-loader',
        ],
    },

How Do We Reproduce?

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
@import '~angular-material/angular-material.css';
@import '~angular-tree-control/css/tree-control.css';
@import '~angular-json-tree/dist/angular-json-tree.css';
@import '~@fortawesome/fontawesome-free/css/all.min.css';


@import '~@fontsource/roboto/300.css';
@import '~@fontsource/roboto/400.css';
@import '~@fontsource/roboto/400-italic.css';
@import '~@fontsource/roboto/500.css';
@import '~@fontsource/roboto/700.css';

@import '~@fontsource/roboto-mono/300.css';
@import '~@fontsource/roboto-mono/400.css';
@import '~@fontsource/roboto-mono/400-italic.css';
@import '~@fontsource/roboto-mono/500.css';
@import '~@fontsource/roboto-mono/700.css';

@import "~angular/angular-csp.css";

[p3x-robot]

i think it is not working with fontawesome anymore.

[alexander-akait]

How Do We Reproduce? is not enough for help, tested material-design-icons-iconfont and fontawesome and all works fine, please respect time of other developers, I can’t guess what’s wrong have only a small piece of information

[alexander-akait]

Also please read #1337

[p3x-robot]

i am sure other people will find this error. it is a 4 years old app, it was always working, since v6 it is as it shows. no idea what is happening.

[p3x-robot]

this works (it respects the outputPath and context):

/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/material-design-icons-iconfont/dist/material-design-icons.css ***!
  \******************************************************************************************************************************/
@charset "UTF-8";
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/MaterialIcons-Regular.56395d5d012de45e4955f7d1dc0030eb.eot);
  /* For IE6-8 */
  src: local("☺"), url(assets/MaterialIcons-Regular.fa3334fe030aed8470dd560acd2df136.woff2) format("woff2"), url(assets/MaterialIcons-Regular.1811d381e9d3e83343943bb574f8f2e1.woff) format("woff"), url(assets/MaterialIcons-Regular.45c4a4612e18a3255f512feacd025fa9.ttf) format("truetype"); }

this is the new version that is not working:

@charset "UTF-8";
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(232cdb93a4ddb62f4f6e.eot);
  /* For IE6-8 */
  src: local("☺"), url(b199778dd31156088315.woff2) format("woff2"), url(7626226d1fc56b3bb539.woff) format("woff"), url(b57de7a51830e3c4c5c2.ttf) format("truetype"); }

[alexander-akait]

Please create reproducible test repo, I can't help without full configuration

[alexander-akait]

And I don't see any problems with output

[alexander-akait]

Do you use file-loader/url-loader? They are deprecated, please migrate https://webpack.js.org/guides/asset-modules/

[p3x-robot]

you do not even need redis, on the top right it is already showing icons.

# terminal 1
git clone https://github.com/patrikx3/redis-ui-material.git
cd redis-ui-material
npm install
npm run dev

# terminal 2
git clone https://github.com/patrikx3/redis-ui-server.git
cd redis-ui-server
npm install
npm run dev

# if you are not working on Electron, at this point you can fire the browser
# @ http://localhost:8080/

now it will work.
now, on the redis-ui-material package.json css-loader upgrade to 6.0.0 and npm install
restart the redis-ui-material and now the http://localhost:8080/ will show the errors. nothing changed.

[p3x-robot]

getting this error:

[p3x-robot]

Do you use file-loader/url-loader? They are deprecated, please migrate https://webpack.js.org/guides/asset-modules/

this is gonna be the problem i suppose. thanks

[alexander-akait]

I will update changelog, we need highlight this

[alexander-akait]

#1339

[alexander-akait]

Anyway give me time I will look