179 votes

venter avatar

Comment importer un fichier CSS dans un composant React

Demandé el 4 de Octobre, 2016
Quand la question a-t-elle été
122938 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je veux importer un fichier CSS dans un composant react.

J'ai essayé import disabledLink from "../../../public/styles/disabledLink"; mais je reçois l'erreur ci-dessous ;

Module non trouvé : Erreur : Cannot resolve 'file' or 'directory' ../../../public/styles/disabledLink in c : \Users\User\Documents\pizza -app \client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66 Hash : 2d281bb98fe0a961f7c4 Version : webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css est l'emplacement du fichier CSS que j'essaie de charger.

Pour moi, il semble que l'import ne recherche pas le bon chemin.

J'ai pensé avec ../../../ il commencera à chercher le chemin trois couches de dossiers au-dessus.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js est l'emplacement du fichier qui doit importer le fichier CSS.

Qu'est-ce que je fais mal et comment puis-je le réparer ?

Demandé el 4 de Octobre, 2016 par venter

0 votes

Avatar de Steeve Pitis

Hey quoi de neuf :D, il semble qu'il n'y ait que deux dossiers en haut (components & src).

Commenté el 4 de Octobre, 2016 par Steeve Pitis

0 votes

Avatar de venter

Hé, tu as raison mais ça ne marche toujours pas. J'ai remarqué que je ne peux pas utiliser l'importation, car je ne peux pas utiliser l'exportation dans un fichier CSS.

Commenté el 4 de Octobre, 2016 par venter

0 votes

Avatar de anson

En utilisant cette méthode stackoverflow.com/questions/39926493/

Commenté el 27 de Août, 2019 par anson
Afficher 1 autres commentaires

Réponses

Trop de publicités?

267voto

code4jhon avatar
code4jhon Points 641

Vous n'êtes même pas obligé de lui donner un nom si vous n'en avez pas besoin :

par exemple

import React from 'react';
import './App.css';

voir un exemple complet ici ( Construire un compilateur JSX Live en tant que composant React ).

Répondu el 24 de Septembre, 2017 par code4jhon (641 Points )

12 votes

Avatar de JGleason

Cela ne fonctionne pas pour moi, lorsque j'essaie d'exécuter mocha avec le registre babel, j'obtiens... I:\....css :1 (function (exports, require, module, __filename, __dirname) { .filter-bg { ^ SyntaxError : Unxpected token .

Commenté el 24 de Octobre, 2018 par JGleason

3 votes

Avatar de Kira

Ou, utiliser react-helmet et injecter la css (si c'est une url) dans la balise <head>.

Commenté el 3 de Janvier, 2019 par Kira

67voto

Alexandr Lazarev avatar
Alexandr Lazarev Points 8611

Vous devez utiliser css-loader lors de la création de bundle avec webpack.

Installez-le :

npm install css-loader --save-dev

Et ajoutez-le aux chargeurs dans vos configurations webpack :

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

Après cela, vous serez en mesure d'inclure des fichiers css dans les js.

Répondu el 4 de Octobre, 2016 par Alexandr Lazarev (8611 Points )

3 votes

Avatar de venter

Je ne suis pas autorisé à importer un autre module dans ce projet. Existe-t-il une autre solution fonctionnant uniquement avec reactjs ou native js ?

Commenté el 4 de Octobre, 2016 par venter

0 votes

Avatar de venter

Donc je pense que je dois utiliser quelque chose comme ça : HTMLElement.style

Commenté el 4 de Octobre, 2016 par venter

0 votes

Avatar de Alexandr Lazarev

C'est un peu moche. Pourquoi n'avez-vous pas le droit d'ajouter des modifications dans l'immeuble du faisceau ?

Commenté el 4 de Octobre, 2016 par Alexandr Lazarev
Afficher 3 autres commentaires

52voto

Mihir Patel avatar
Mihir Patel Points 893

Je vous suggère d'utiliser les modules CSS :

React

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

Rendu de la composante :

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>
Répondu el 4 de Octobre, 2016 par Mihir Patel (893 Points )

0 votes

Avatar de Mihir Patel

J'ajouterais la partie 1 comme réponse ci-dessous. Et vous pouvez suivre ma réponse pour tester votre composant.

Commenté el 4 de Octobre, 2016 par Mihir Patel

4 votes

Avatar de venter

J'ai essayé ça et ça ne marche pas. J'ai essayé de l'inclure comme ceci : import styles from "./disabledLink.css"; et obtenir l'erreur suivante : Module non trouvé : Error : Cannot resolve 'file' or 'directory' ./disabledLink.css in c : \Users\Basti Kluth \Documents\pizza -app \client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-49

Commenté el 4 de Octobre, 2016 par venter

2 votes

Avatar de Alexandr Lazarev

Les modules css doivent être installés séparément, github.com/css-modules/css-modules

Commenté el 4 de Octobre, 2016 par Alexandr Lazarev
Afficher 1 autres commentaires

28voto

Webars avatar
Webars Points 1727

L'exemple suivant importe un fichier CSS externe dans un composant React et produit les règles CSS dans le fichier d'aide. <head /> du site web.

  1. Installer Chargeur de style y Chargeur CSS :

    npm install --save-dev style-loader npm install --save-dev css-loader

  2. Dans webpack.config.js :

    module.exports = { module: { rules: [ { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }

  3. Dans un fichier de composants :

    import './path/to/file.css';

Répondu el 19 de Mars, 2018 par Webars (1727 Points )

1 votes

Avatar de Anton Danilchenko

Et j'utilise babel pour exécuter watcher. Peut-être qu'il ne voit pas du tout dans le fichier webpack.config.js.

Commenté el 27 de Mars, 2018 par Anton Danilchenko

0 votes

Avatar de Webars

Avez-vous installé css-loader ? Je ne vois pas non plus votre webpack.config.js.

Commenté el 27 de Mars, 2018 par Webars

1 votes

Avatar de Steve Works

Vous pouvez ajouter d'autres règles de module au format objet comme suit rules la valeur du tableau.

Commenté el 20 de Janvier, 2019 par Steve Works

1voto

Bertwin Romero avatar
Bertwin Romero Points 21

  1. Installez Style Loader et CSS Loader :

    npm install --save-dev style-loader
npm install --save-dev css-loader

  2. Configurer webpack

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }
Répondu el 7 de Juin, 2018 par Bertwin Romero (21 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X