Comment importer un fichier CSS dans un composant React

90

Je souhaite importer un fichier CSS dans un composant de réaction.

J'ai essayé import disabledLink from "../../../public/styles/disabledLink";mais j'obtiens l'erreur ci-dessous;

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

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'importation ne recherche pas le bon chemin.

J'ai pensé que ../../../cela commencerait à rechercher le chemin trois couches de dossiers ci-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 y remédier?

javascript reactjs relative-path ventre
la source
Hé quoi de neuf: D, il ne ressemble qu'à deux dossiers ci-dessus (composants et src)
Steeve Pitis
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
venter
en utilisant cette façon stackoverflow.com/questions/39926493/…
anson
Je reçois une erreur -> @media uniquement écran et (min-width: 320px) et (max-width: 640px) {^ SyntaxError: jeton non valide ou inattendu à Module._compile (internal / modules / cjs / loader.js: 723 : 23)
Sadanand

Réponses:

150

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

par exemple

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

voir un exemple complet ici ( Construisez un compilateur JSX Live comme composant React ).

code4jhon
la source
4
Cela ne fonctionne pas pour moi, quand j'essaye d'exécuter mocha avec le registre babel, j'obtiens ... I: \ .... css: 1 (function (exports, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: jeton inattendu.
JGleason
3
Ou, utilisez react-casque et injectez le css (si c'est une URL) dans la balise <head>
Kira
52

Vous devez utiliser css-loader lors de la création d'un 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 pourrez inclure des fichiers css dans js.

Alexandr Lazarev
la source
1
Je ne suis pas autorisé à importer un autre module dans ce projet. Leur autre solution fonctionne-t-elle uniquement avec reactjs ou native js?
venter
Je pense donc que je dois utiliser quelque chose comme ceci: HTMLElement.style
venter
Ça a l'air un peu moche. Pourquoi n'êtes-vous pas autorisé à ajouter des modifications dans la création de bundles?
Alexandr Lazarev
C'est un post-traitement pour un travail sur reactjs et on nous dit de résoudre les exigences avec les modules inclus pendant le travail
venter
Ok, mais je voulais juste mentionner que la récupération des balises de style n'importait pas les fichiers css comme vous l'avez demandé dans votre question. Ce sont 2 problèmes différents.
Alexandr Lazarev
31

Je suggérerais 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>
Mihir Patel
la source
J'ajouterais la partie 1 comme réponse ci-dessous. Et vous pouvez suivre ma réponse pour tester votre composant.
Mihir Patel
2
Si essayé ceci et cela ne fonctionne pas. J'ai essayé de l'inclure comme ceci: import styles from "./disabledLink.css";et obtenir l'erreur suivante: Module non trouvé: Erreur: Impossible de résoudre 'fichier' ou 'répertoire' ./disabledLink.css dans c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
venter
1
les modules css doivent être installés séparément, github.com/css-modules/css-modules
Alexandr Lazarev
1
Et comment puis-je écrire une requête multimédia pour un tel type de CSS, n'importe quelle idée?
Sonu Bamniya
18

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

  1. Installez 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';
Webars
la source
Et j'utilise babel pour exécuter watcher. Peut-être qu'il ne voit pas du tout dans le fichier webpack.config.js
Anton Danilchenko
Avez-vous installé css-loader? De plus, je ne vois pas votre webpack.config.js.
Webars
1
Vous pouvez ajouter plus de règles de module au format objet en tant rulesque valeur du tableau.
Ari
3

Les solutions ci-dessus sont complètement modifiées et obsolètes. Si vous voulez utiliser des modules CSS (en supposant que vous ayez importé des chargeurs css) et que j'essaie de trouver une réponse à cela depuis si longtemps et je l'ai finalement fait. Le chargeur Webpack par défaut est assez différent dans la nouvelle version.

Dans votre webpack, vous devez trouver une partie commençant par cssRegex et la remplacer par ceci;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}
Ugur Yilmaz
la source
stackoverflow.com/questions/53572200/… Solution alternative
Maulik Sakhida
1

Les modules CSS vous permettent d'utiliser le même nom de classe CSS dans différents fichiers sans vous soucier des conflits de noms.

Button.module.css

.error {
  background-color: red;
}

autre-stylesheet.css

.error {
  color: red;
}

Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}
Amaresh Tiwari
la source
1

  1. Installez Style Loader et CSS Loader:

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

  2. Configurer le Webpack

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            }, {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }
Bertwin Romero
la source
0

Dans les cas où vous souhaitez simplement injecter des styles d'une feuille de style dans un composant sans les regrouper dans toute 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 bibliothèque et je l'ai construite pour les cas où les importations massives de styles et de modules CSS ne sont pas la meilleure ou la plus viable des solutions.

Glortho
la source
0

Vous pouvez également utiliser le module requis.

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

L'utilisation d'extrait-css-chunks-webpack-plugin et de chargeur css-loader fonctionne pour moi, voir ci-dessous:

webpack.config.js Importer extract-css-chunks-webpack-plugin

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

webpack.config.js Ajoutez la règle css, extrayez d'abord les morceaux css puis le chargeur css css-loader les incorporera dans le document html, assurez-vous que css-loader et extract-css-chunks-webpack-plugin sont dans le package.json dev dépendances

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js Créer une instance du plugin

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

Et maintenant, l'importation de css est possible Et maintenant, dans un fichier tsx comme index.tsx, je peux utiliser l'importation comme cette importation './Tree.css' où Tree.css contient des règles css comme

body {
    background: red;
}

Mon application utilise du typographie et cela fonctionne pour moi, vérifiez mon dépôt pour la source: https://github.com/nickjohngray/staticbackeditor

pseudo
la source
-2

Vous pouvez importer votre .cssfichier dans un .jsxfichier

Voici un exemple -

import Content from '../content/content.jsx';
Saurabh Ramchandrarao Kulkarni
la source