CODEWITHSUNDEEP
webpackfont-facewebpack-4css-loader
Roman Pokrovskij
Roman Pokrovskij

Reputation: 9776

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

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

Upvotes: 2

Views: 1003

Answers (2)

Vincente
Vincente

Reputation: 445

Add url: false option to css and scss loaders. It will disable parsing paths of fonts and images in your css and it won`t pack them in build.

module: {
rules: [
  {
    test: /\.scss$/i,
    use: [
      {
        loader: "css-loader",
        options: {
          // Do not parse paths specified in url() and image-set to not include fonts to build
          url: false
        },
      },
      'sass-loader'
    ],
  },
],
},

Upvotes: 1

Vijay122
Vijay122

Reputation: 964

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

Upvotes: 1

Related Questions