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

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 30 (11 by maintainers)

Commits related to this issue

fixed webfonts, rebumping css-loader to 6.0.0 https://github.com/webpack-contrib/css-loader/issues/1338 https://webpack.js.org/guides/asset-modules/#resource-assets — committed to jakejarvis/jarv.is by jakejarvis 3 years ago

Most upvoted comments

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

p3x-robot on Jul 15, 2021

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

alexander-akait on Jul 15, 2021

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 😃

p3x-robot on Jul 16, 2021

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 !

enrique-ramirez on Jul 21, 2021

Here problem with inline URLs https://github.com/webpack-contrib/css-loader/issues/1342

alexander-akait on Jul 16, 2021

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

p3x-robot on Jul 15, 2021

I will update changelog, we need highlight this

alexander-akait on Jul 15, 2021