web-dev-qa-db-fra.com

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

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

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

Mais l'erreur me montre ceci:

Module introuvable: Erreur: Impossible de résoudre le fichier ou le répertoire ../../../public/styles/disabledLink dans c:\Utilisateurs\Utilisateur\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 ce chemin:

C:\Utilisateurs\Utilisateur\Documents\pizza-app\Client\Public\Styles\disabledLink.css

Pour moi, il semble que l'importation ne cherche pas le bon chemin. Je pensais qu'avec ../../../ il commencerait à chercher le chemin des trois couches de dossier ci-dessus. 

Le fichier devant importer le fichier CSS se trouve ici:

C:\Utilisateurs\Utilisateur\Documents\pizza-app\Client\src\components\ShoppingCartLink.js

Merci pour toute contribution!

javascripthtmlcssreactjs
46
venter

Vous devez utiliser css-loader lorsque vous créez un paquet avec wepback. 

Installez-le:

npm install css-loader --save-dev

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

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

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

42
Alexandr Lazarev

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

87
Jonathan Caballero

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

Rendu du 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>
21
Mihir Patel

Ce qui suit importe un fichier CSS externe dans un composant React et affiche les règles CSS dans le <head /> du site Web.

  1. Installer Style Loader et CSS Loader :
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';
12
Webars

  1. Installez Style Loader et CSS Loader: Npm installer --save-dev style-loader Npm install --save-dev css-loader

  2. Configurer le webpack

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

1
Bertwin Romero

Dans les cas où vous souhaitez simplement injecter certains styles d'une feuille de style dans un composant sans regrouper l'ensemble de la feuille de style, je recommande https://github.com/glortho/styled-import . Par exemple:

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

REMARQUE: je suis l'auteur de cette bibliothèque et je l'ai construite pour les cas où l'importation en masse de styles et de modules CSS n'est pas la solution la meilleure ni la plus viable.

0
glortho

Vous pouvez également utiliser le module requis.

require('./componentName.css');
const React = require('react');
0
Juan Navarrete