サードパーティのCSSファイルで解決されるURLを無視する

Question

以下の設定でWebpackを使用してCSSをコンパイルしています。私のCSSでは、いくつかのCSSファイルをNPMパッケージからインポートしています。 @import '../../node_modules/slick-carousel/slick/slick-theme.scss'; - 解決できないURLが含まれています。

これらのインポートされたCSSファイルのURL解決を特に無効にすることはできますか？とにかく自分のCSSでこれらのスタイルを上書きしているので、これらを処理するためにWebpackは必要ありません。

例エラー：webpack.config.jsから

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 

抜粋：あなたは確認する必要がありますので、

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

Answer 1

css-loaderは、あなたのCSSを解析し、URLと@import() Sを解決するローダーですnode_modulesディレクトリにあるファイルにはcss-loaderを使用しないでください。 2つの別々のルールが必要です：

{ 
    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', 
    ], 
},