Ignore URL resolving in third-party CSS files

Question

I am using Webpack with the configuration below to compile my CSS. In my CSS I am importing some CSS files from NPM packages - e.g. @import '../../node_modules/slick-carousel/slick/slick-theme.scss'; - that contain URLs which it cannot resolve.

Is it possible to disable URL resolving for these imported CSS files specifically? Since I am overwriting these styles anyway with my own CSS I don't need Webpack to handle these.

Example error:

ERROR in ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js?{}!./src/css/style.scss
Module not found: Error: Can't resolve './ajax-loader.gif' in '/.../css'
@ ./node_modules/css-loader?{"minimize":false}!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js?{}!./src/css/style.scss 6:9840-9868
@ ./src/css/style.scss
@ ./src/js/app.js
@ multi ./src/js/app.js

Excerpt from webpack.config.js:

{
    test: /\.(scss)$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                minimize: false
            },
        },
        'postcss-loader',
        {
          loader: 'sass-loader',
          options: {
          }
        }
    ]
  }

Answer 1

css-loader is the loader which parses your CSS and resolves URLs and @import()s, so you need to make sure that you do not use css-loader for any files in your node_modules directory. You will need two separate rules:

{
  test: /\.scss$/,
  exclude: /\/node_modules\//,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader',
  ],
},
{
  test: /\.scss$/,
  include: /\/node_modules\//,
  use: [
    'style-loader',
    'postcss-loader',
    'sass-loader',
  ],
},

Answer 2

Probably answer from the 9 Jul is working as expected, in 2022 I've used little bit different approach :

...
{
  test: /\.css/,
  loaders: [
    'style-loader', {
      loader: 'css-loader',
      options: { url: false }
    }
  ],
},
...