web-dev-qa-db-fra.com

react-slick: Échec de l'importation de CSS à partir de slick-carrousel

Réagissez débutant ici. Mon application utilise create-react-app, et j'attire react-slick pour un carrousel. J'essaie de suivre les instructions fournies dans la configuration de react-slick, mais ce qui suit ne fonctionne pas pour moi:

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

J'obtiens l'erreur suivante:

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

Cela fonctionne si j'ajoute le css à index.html à partir du CDN, mais je préfère éviter cet appel réseau, car je pense que cela affecte le rendu de la page lors du chargement initial.

J'ai essayé de suivre les instructions pour configurer create-react-app pour utiliser des chemins relatifs, mais cela ne fonctionnait pas non plus pour moi. Je me trompe peut-être complètement, mais je pensais que la notation ~ me permettrait d'importer des scss à partir d'un paquet dans/node_modules.

Toute suggestion/clarification serait grandement appréciée.

Mise à jour: ajout de la configuration à partir de mon fichier webpack.config (dont la plupart est la valeur par défaut de 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

J'avais du mal avec ce problème et je trouve enfin la solution:

  1. allez à l'intérieur de votre node_modules dossier et recherchez slick-carousel dossier
  2. à l'intérieur de cette découverte slick.scss et slick-theme.scss à partir du dossier slick et ouvrez-les
  3. créer deux fichiers séparés avec des noms de _slick.scss et _slickTheme.scss à l'intérieur de vos dossiers de style de votre projet
  4. tout copier depuis slick.scss et slick-theme.scss et placez-les dans vos fichiers nouvellement créés (_slick.scss et _slickTheme.scss)
  5. importez-les dans votre app.scssfichier
  6. maintenant, si vous utilisez webpack comme moi, je suppose que vous ne pouvez pas résoudre './ajax-loader.gif' erreur et ne peut pas résoudre l'erreur de police après cela
  7. en fait, ces fichiers ont été utilisés par slick-carousel css lui-même et pour cela, nous pouvons simplement aller à l'intérieur de votre nouvellement créé _slickTheme.scss et trouver ces lignes
/* 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. les commenter
4
a_m_dev

vous changez pour être ceci:

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

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

supprimer ~

7
putra irawan

vous avez peut-être manqué ceci:

npm install slick-carousel
6
Andrian Tam

Vous devez également installer un carrousel lisse pour CSS et la police. C'est l'astuce ici. A bientôt ...

npm install slick-carousel

Importez ensuite les fichiers css dans votre fichier App.js.

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

Vous devez avoir des chargeurs appropriés. Utilisez style-loader en combinaison avec css-loader pour le CSS. Utilisez chargeur de fichiers et chargeur d'url afin de charger les polices et les images liées dans les fichiers CSS.

(Voici les paramètres de configuration du chargeur de fichiers)

Donc à la fin, votre webpack.config.js devrait contenir quelque chose comme ceci:

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

Après cela, vous pouvez simplement importer des styles dans le point d'entrée de votre application (par exemple /src/index.js):

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

Il échoue car vous importez des modules CSS dans votre application et les styles de slick ne sont pas appliqués car ils sont mis en cache. Je l'ai corrigé dans mon projet comme ci-dessous:

Dans vos fichiers style.scss mettez ceci

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