web-dev-qa-db-ja.com

洗練されたカルーセルテーマcssをインポートすると、webpackビルドでエラーが発生します

親のscssにslick-theme.scssを次のようにインポートしようとしています

@import "../node_modules/slick-carousel/slick/slick-theme.css";

しかし、バンドル中に、slick-theme.scssにインポートされたファイルでエラーが発生します。これがエラーログです

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss
    Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/Vishal/Documents/Work/nf-core/sass'
     @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss 6:89679-89707

resolve-url-loaderもwebpack構成に追加しようとしましたが、それは役に立ちません。

これが私のwebpackscssローダーセクションです

loaders: commonConfig.module.loaders.concat({
    test: /\.s?css$/,
    exclude: /(node_modules)/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader', 'sass-loader']
    })
})
webpacksassslick.js
7
Vishal Sharma

Roberto Alicataによるソリューションは機能しますが、追加のファイルなしで簡単に実現できます。 slickをインポートする前に、次の2つの変数を追加するだけです。

$slick-font-path: "~slick-carousel/slick/fonts/";
$slick-loader-path: "~slick-carousel/slick/";

@import '~slick-carousel/slick/slick', '~slick-carousel/slick/slick-theme';

他の変数は問題を引き起こさず、!defaultフラグは、デフォルト値を定義するために使用されます上書きされる、上書きしないでください。

11
Fabian von Ellerts

ファイル.scss（つまり、fix-slick.scss）を作成し、次のように記述します。

$slick-font-path: "~slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "~slick-carousel/slick/" !default;
$slick-arrow-color: black !default;

ここで、このファイルをメインのscssファイルからインポートします。

5
Roberto Alicata

CSSローダーは、_@import 'other.css'_またはbackground-image: url("/images/loader.gif")で参照されるリソースもwebpackモジュールツリーに返します。

「_Can't resolve './ajax-loader.gif'_」は、gifへのパスの解決に問題があるようです。
_._で始まるべきではないと思います
CSSローダーは通常、パスが文字（ファイル名）で始まること、絶対パスの場合は_/_、非相対パスの場合は_~_（webpack機能）を想定しています。これはslick-theme.scssのエラーですか？

Gif/png/jpgファイルを処理するためにファイルローダーまたはURLローダーを追加することも役立ちます。
主に、それらをnode_modulesからdist/releaseフォルダーに移動します。

3
igl