web-dev-qa-db-ja.com

react-slick：slick-carouselからのCSSのインポートが失敗する

ここで初心者に反応します。私のアプリはcreate-react-appを使用しており、カルーセル用に react-slick を取得しています。 react-slickのセットアップで提供されている指示に従うようにしていますが、次の方法ではうまくいきません。

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

次のエラーが発生します。

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

CDNからindex.htmlにcssを追加すると機能しますが、初期読み込み時のページのレンダリングに影響していると思われるため、そのネットワーク呼び出しは避けたいと思います。

相対パスを使用するようにcreate-react-appを設定するために instructions を試してみましたが、それも私にとってはうまくいきませんでした。多分私は完全に誤解しているかもしれませんが、〜表記は/ node_modulesのパッケージからscssをインポートすることを許可するだろうと思いました。

どんな提案/説明もいただければ幸いです。

更新：webpack.configファイルからセットアップを追加します（ほとんどはcreate-react-appのデフォルトです）。

{
            test: /\.scss$/,
            use: [
              require.resolve('classnames-loader'),
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: 1,
                  localIdentName: "[name]__[local]___[hash:base64:5]"  
                },
              },{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 6 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway,'
                      ],
                      remove: false,
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },{
                loader: require.resolve('sass-loader'),
                options: {
                  outputStyle: 'expanded'
                }
              }
            ],
          }
reactjsreact-slickcss-import
5
flysi3000

私はこの問題に苦労しており、最終的に解決策を見つけました：

  1. node_modulesフォルダ内に移動して、slick-carouselフォルダを見つけてください
  2. その中にslickフォルダからslick.scssとslick-theme.scssを見つけて開きます
  3. プロジェクトのスタイルフォルダー内に_slick.scssおよび_slickTheme.scssという名前の2つの個別のファイルを作成します
  4. slick.scssとslick-theme.scssからすべてをコピーして、新しく作成したファイル（_slick.scssと_slickTheme.scss）に入れます。
  5. app.scssfileにインポートします
  6. 私のようにwebpackを使用している場合、'./ajax-loader.gif'エラーを解決できず、その後フォントエラーを解決できないと思います
  7. 実際、これらのファイルはslick-carousel css it selfによって使用されているため、新しく作成した_slickTheme.scssに単純に移動して、これらの行を見つけることができます。
/* Slider */

.slick-list {
    .slick-loading & {
        background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
    }
}

/* Icons */
@if $slick-font-family == "slick" {
    @font-face {
        font-family: "slick";
        src: slick-font-url("slick.eot");
        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
        font-weight: normal;
        font-style: normal;
    }
}
  1. それらをコメントアウトする
4
a_m_dev

あなたはこれに変わります：

import "slick-carousel/slick/slick.css";

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

削除〜

7
putra irawan

あなたはこれを逃したかもしれません：

npm install slick-carousel
6
Andrian Tam

また、CSSとフォント用のslick-carouselをインストールする必要があります。 それがここでのトリックです。乾杯...

npm install slick-carousel

次に、CSSファイルをApp.jsファイルにインポートします。

 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
2
Mustkeem K

適切なローダーが必要です。 CSSでは、 style-loader と css-loader を組み合わせて使用​​します。 CSSファイル内でリンクされているフォントと画像をロードするには、 file-loader および rl-loader を使用します。

（これはファイルローダーの構成設定です）

したがって、最後に、webpack.config.jsには次のようなものが含まれているはずです：

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ].map(require.resolve)
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }]
        }
    ]
},

その後、スタイルをアプリケーションのエントリポイントにインポートするだけです（例：/ src/index.js）：

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
1
imprfekt

アプリにcssモジュールをインポートしているため失敗し、slickからのスタイルはキャッシュされているため適用されません。以下のようにプロジェクトで修正しました：

あなたのstyle.scssファイルにこれを入れてください

:global {
    @import 'node_modules/slick-carousel/slick/slick';
}
0
Dzianis Bunchanka