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

[p3x-robot]

yeah i fixed it, thanks for the additional info! it will help

[alexander-akait]

@p3x-robot So I don't need to check it? Do you just remove file-loader and url-loader?

[p3x-robot]

yup. removed the file-loader and changed like this:

{
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
    }

for all kind of files the same settings and it works. it was not a css loader problem. thanks

[sergeushenecz]

React semantic ui not showing icons also after updated to 6.x.x

[ghiscoding]

That also breaks all my inline icons on my side after upgrading to 6.0, I tried replacing the file-loader and url-loader by asset/resource without any luck. On the other end, I went back to css-loader version 5.2.6 but kept the changes with asset/resource and my icons are back so it really seems to be related to css-loader

rules: [
      {
        test: /\.css$/i,
        use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader']
      },
      { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'], issuer: /\.[tj]s$/i },
      { test: /\.(sass|scss)$/, use: ['css-loader', 'sass-loader'], issuer: /\.html?$/i },
-     { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
+     { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', type: 'asset/resource', options: { limit: 8192 } },
-     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' },
+     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, type: 'asset/resource' },
      { test: /\.html$/i, loader: 'html-loader', options: { esModule: false } },
      { test: /\.ts?$/, use: [{ loader: 'ts-loader', options: { transpileOnly: true } }] }
    ],

Note: my icons are SVG and they are created directly in .scss file (they're not coming from the outside, it's really all in scss files)

@include loadsvg(
  ".mdi.mdi-account",
  "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
  encodecolor($icon-color), $icon-height, $icon-width, inline-block
);

@mixin loadsvg($icon-class, $path-drawing, $fill, $height: 18px, $width: 18px, $display: inline-block, $viewBox: 24) {
  #{$icon-class}:before {
    height: $height;
    width: $width;
    display: $display;
    vertical-align: $svg-icon-vertical-align;
    // margin-top: -1px; // small patch to remove padding all around the SVG
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{$fill}" viewBox="0 0 #{$viewBox} #{$viewBox}"><path d="#{$path-drawing}"></path></svg>');
  }
}

My repo/lib Slickgrid-Universal is not exactly small (it's a monorepo) but if it's any helpful then follow the installation notes and here's the link for the webpack.config.js and all the .scss files are located in this styles folder.

I'll stick with "css-loader": "^5.2.6" for now since that still works

EDIT

I found that the content: url changed and everything got escaped

before

content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23006DCC" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg>'))

after

content: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22#006DCC%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z%22%3E%3C/path%3E%3C/svg%3E"))

is there a flag to disable escaping or something similar?

[p3x-robot]

i use it different:
https://github.com/patrikx3/redis-ui-material/blob/master/src/builder/webpack.config.js#L197
https://github.com/patrikx3/redis-ui-material/blob/master/src/builder/webpack.config.js#L271

after i removed the loaders for the assets, it started working.
maybe you can learn from this. it is all latest.

[ghiscoding]

I did see your comments about the asset and I did that change but the html escaping is a different problem. Thanks anyway

[p3x-robot]

oh ok, sorry, now i got you, but this is a different issue, please make a new issue, as the one i created is different (although the issue title is similar)... still....

[p3x-robot]

i think @alexander-akait is very busy, but you will probably get a solution, if you ask nice :), it is an escaping problem, besides it could be related to url-loader at the same time as well, not sure 100%

[alexander-akait]

Here problem with inline URLs #1342

[p3x-robot]

Here problem with inline URLs #1342

there you go! :)

[ghiscoding]

Great thanks a lot @alexander-akait for the fast reply, I see that I need to wait for a future release including the fix 😄

[p3x-robot]

this dude @alexander-akait is a god! he is like right away helps and working on most important features!
i wish him millions of dollars and no more work :)

[enrique-ramirez]

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

I feel like this should be mentioned somewhere on the docs (sorry if it is already, I didn't see it). After updating to v6 my images stopped working all of a sudden, and all I needed to do was remove file-loader from my webpack config and add the type: 'asset/resource', instead.

Just in case this helps anyone else, I went from this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: (file, resourcePath, context) => {
                const relativePath = path.relative(`${context}/src/img`, resourcePath)

                return `assets/img/${relativePath}`
              },
            },
          },
          {
            loader: 'cache-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: options.mode === 'development',
              gifsicle: { enabled: false },
            },
          },
        ],
      },
    ],
  },
};

To this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        type: 'asset/resource',
        use: [
          {
            loader: 'cache-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: options.mode === 'development',
              gifsicle: { enabled: false },
            },
          },
        ],
      },
    ],
  },
};

And my images are working again. Thanks, @alexander-akait !

[ghiscoding]

It's briefly mentioned in the changelog breaking changes where file-loader and url-loader were deprecated in WebPack itself (not in this repo css-loader) which is probably why it's not emphasized too much

[alexander-akait]

Feel free to send a PR and improve our docs

Also we prepare webpack-contrib/image-minimizer-webpack-plugin#220 so you can remove image-webpack-loader, image-minimizer-webpack-plugin have caches/more features/etc, for example if can write:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  // It will be webp
  background-image: url("image.jpg?preset=webp");
}

Also all images above will be minimized