Comment importer un fichier css dans un réagir composant?

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 ce chemin d'accès:

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

  • Hey what's up :D, il semble que seuls deux dossier ci-dessus (composants & src)
  • Hey, vous avez raison, mais il encore dosn pas de travail. J'ai remarqué que je ne peux pas utiliser l'importation, parce que je ne peux pas utiliser d'exportation dans un fichier CSS.
InformationsquelleAutor venter | 2016-10-04
  1. 104

    Vous n'avez même pas de nom, si vous n'avez pas besoin d':

    par exemple

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

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

    • Ce doit être la accepté de répondre. Webpack config et packages tiers compliquer les choses.
    • Ne fonctionne pas pour moi, quand j'ai essayer de lancer moka avec babel inscrivez-je obtenir... I:\....css:1 (function (exportations, exigent, le module, l' __nom de fichier, __dirname) { .filtre-bg { ^ SyntaxError: Unexpected token .
    • Ou, utilisez réagir casque et injecter le css (si c'est un url) dans le <head> tag
    InformationsquelleAutor Jonathan Caballero
  2. 44

    Vous devez utiliser css-chargeur lors de la création de bundle avec wepback.

    L'installer:

    npm install css-loader --save-dev

    Et l'ajouter à chargeurs dans votre webpack configs: 

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

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

    • Je ne suis pas autorisé à l'importation d'un autre module dans ce projet. Est leur autre solution que de travailler avec reactjs natif ou js?
    • Donc, je pense que je dois utiliser quelque chose comme ceci: HTMLElement.style
    • Il a l'air un peu moche. Pourquoi n'êtes-vous pas autorisés à ajouter des modifications dans le bundle de la construction?
    • C'est un post-traitement pour une workship sur reactjs et on nous dit que pour résoudre les exigences avec les modules inclus pendant workship
    • Ok, mais je voulais juste dire que le téléchargement des balises de style n'est pas importer fichiers css comme vous l'avez demandé dans votre question. Ce sont 2 problèmes différents.
    • ok merci beaucoup pour votre aide
    • Heureux de vous aider!
    • Je upvoted votre réponse, Il m'a aidé à bien donc merci beaucoup! Mais seule une petite modification est nécessaire. Vous devez également installer le style du chargeur de module
    • Il ne fonctionne pas pour moi après l'ajout de ce module. Il montre d'un mécanisme de prévention d'erreur.
    • Il a travaillé seulement après que j'ai également chargé de style-chargeur en plus de css-loader. Merci en tout cas!

    InformationsquelleAutor Alexandr Lazarev
  3. 22

    Je vous recommande 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 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>
    • Où il est différent sur ce qu'il montre ?
    • Je voudrais ajouter à la partie 1 que la réponse ci-dessous. Et vous pouvez suivre ma réponse pour tester votre composant.
    • Si essayé et il dosn fonctionne pas. J'ai essayé de l'inclure comme ceci: import styles from "./disabledLink.css"; et obtenez l'erreur suivante: Module non trouvé: Erreur: Impossible de résoudre "fichier" ou "dossier". /disabledLink.css dans c:\Users\Basti Kluth\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20 à 49
    • css des modules doivent être installés en dehors, github.com/css-modules/css-modules
    • Et comment puis-je écrire une requête de support pour ce type CSS, une Idée?
    InformationsquelleAutor Mihir Patel
  4. 12

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

    1. Installer Le Style Du Chargeur De 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';
    • Bonjour. C'est, malheureusement, ne fonctionne pas pour moi. Pouvez-vous s'il vous plaît regardez sur mon Gist et d'essayer de l'exécuter? J'ai peut-être besoin de faire quelques petits ajustements, mais ne peut pas le trouver. Je vous remercie. Mon code est ici: gist.github.com/1st/901d372ddba5616596366c46f7d4a4b4
    • Et j'utilise babel pour exécuter l'observateur. Peut-être qu'il ne voit pas dans le webpack.config.js fichier de tous les
    • Avez-vous installé css-loader? Aussi je ne vois pas votre webpack.config.js.
    • Vous pouvez ajouter plus de module de règles dans le format de l'objet comme rules du tableau de la valeur.
    InformationsquelleAutor Webars
  5. 1

    1. Installer 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]'
    }
    }
    ]
    }

    InformationsquelleAutor Bertwin Romero
  6. 0

    Dans le cas où vous voulez juste pour s'injecter de certains styles à partir d'une feuille de style en composant sans groupage dans 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`.

    NOTE: je suis l'auteur de cette lib, et je l'ai construit pour le cas où la masse des importations de styles CSS et les modules ne sont pas les meilleurs ou les plus de solution viable.

    InformationsquelleAutor glortho