webpack: new css-loader 4.0.0 tries to load fonts (make them embded); how to disable this?

Question

In my styles I have such font-faces definition:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), 
        url(/fonts/MaterialIcons-Regular.woff2) format('woff2'), 
        url(/fonts/MaterialIcons-Regular.woff) format('woff'), 
        url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

After I have updated css-loader to new version 4.0.0 (released several days ago) I got those errors (bulding bundle):

ERROR in ./src/index.scss Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve '/fonts/MaterialIcons-Regular.woff2' in 'D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.RegWebApp\src' at doResolve (D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.RegWebApp\node_modules\enhanced-resolve\lib\Resolver.js:209:21) at hook.callAsync (D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.RegWebApp\node_modules\enhanced-resolve\lib\Resolver.js:285:5) at _fn0 (eval at create (D:\cot\EDelivery\EDelivery\EDelivery.Injected.AspCore.RegWebApp\node_modules\tapable\lib\HookCodeFactory.js:32:10), :15:1)

It looks like in new version css-loader tries to make fonts embded. How to disable this behaviour? (Can't find the option there: https://webpack.js.org/loaders/css-loader/ )

My configuration is:

{
        test: /\.(scss|css)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                    sourceMap: true
                }
            },
            { // ... postcss-loader, sass-loader

Vijay122 Vijay122 · Accepted Answer · 2020-07-29T12:48:03

instead of loader: "css-loader", you can pass extra params like this to disable the feature. "css-loader?url=false"

webpack: new css-loader 4.0.0 tries to load fonts (make them embded); how to disable this?

1 Answers