44 votes

Comment importer un fichier css dans un composant de réaction?

Comme le dit le titre, je souhaite importer un fichier CSS dans un réagir composant. J'ai essayé ce qui suit:

import disabledLink from "../../../public/styles/disabledLink";

Mais d'erreur m'indique ceci:

Module non trouvé: Erreur: Impossible de résoudre "fichier" ou "répertoire' ../../../public/styles/disabledLink dans c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66
Hash: 2d281bb98fe0a961f7c4
Version: webpack 1.13.2

Le fichier se trouve dans:

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css

Pour moi, il semble que l'importation n'est pas à la recherche de la bonne voie. J'ai pensé avec ../../../ il pour commencer à chercher le chemin de trois dossier de couches ci-dessus.

Le fichier à importer le fichier CSS se trouve ici:

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js

Merci pour toute entrée!

81voto

code4jhon Points 641

Vous n'avez même pas besoin de le nommer si vous n'avez pas besoin de:

par exemple

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

voir un exemple complet ici https://egghead.io/lessons/build-a-jsx-live-compiler

41voto

Alexandr Lazarev Points 8611

Vous devez utiliser css-loader lors de la création d'un paquet avec wepback.

Installez-le:

 npm install css-loader --save-dev
 

Et ajoutez-le aux chargeurs dans les configurations de votre webpack:

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

Après cela, vous pourrez inclure des fichiers CSS dans js.

20voto

Mihir Patel Points 893

Je suggère d'utiliser des modules CSS:

Réagir

 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>;
    }
}
 

Rendre le composant:

 <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>
 

12voto

Webars Points 1727

La suite de l'importation d'un fichier CSS externe dans un Réagir composant et sorties les règles CSS dans l' <head /> du site internet.

  1. Installez le Style du Chargeur et CSS Chargeur:
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. Dans webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. Dans un fichier de composant:
import './path/to/file.css';

1voto

Bertwin Romero Points 21
  1. Installez le Style du Chargeur et du CSS Loader: npm install --save-dev style-chargeur npm install --save-dev css-chargeur

  2. Configurer webpack

module: { chargeurs: [ { test: /.css$/, chargeur: style-loader' }, { test: /.css$/, chargeur: 'css-loader', requête: { modules: true, localIdentName: "[nom][local]_[hash:base64:5]' } } ] }

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: