So importieren Sie eine CSS-Datei in eine React-Komponente

95

Ich möchte eine CSS-Datei in eine Reaktionskomponente importieren.

Ich habe es versucht, import disabledLink from "../../../public/styles/disabledLink";aber ich erhalte den folgenden Fehler.

Modul nicht gefunden: Fehler: 'Datei' oder 'Verzeichnis' kann nicht aufgelöst werden ../../../public/styles/disabledLink in c: \ Benutzer \ Benutzer \ Dokumente \ 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 ist der Speicherort der CSS-Datei, die ich laden möchte.

Mir scheint, dass der Import nicht den richtigen Weg sucht.

Ich dachte, ../../../damit würde der Pfad drei Ordnerebenen oben nachschlagen.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js ist der Speicherort der Datei, die die CSS-Datei importieren soll.

Was mache ich falsch und wie kann ich das beheben?

javascript reactjs relative-path venter
quelle
Hey, was ist
los
Hey, du hast recht, aber es funktioniert immer noch nicht. Ich habe festgestellt, dass ich den Import nicht verwenden kann, da ich den Export innerhalb einer CSS-Datei nicht verwenden kann
venter
auf diese Weise stackoverflow.com/questions/39926493/…
anson
Ich erhalte die Fehlermeldung -> @media only screen und (min-width: 320px) und (max-width: 640px) {^ SyntaxError: Ungültiges oder unerwartetes Token bei Module._compile (intern / modules / cjs / loader.js: 723) : 23)
Sadanand

Antworten:

157

Sie müssen es nicht einmal benennen, wenn Sie nicht müssen:

z.B

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

Ein vollständiges Beispiel finden Sie hier ( Erstellen eines JSX Live-Compilers als Reaktionskomponente ).

code4jhon
quelle
5
Funktioniert bei mir nicht, wenn ich versuche, Mokka mit Babel-Register auszuführen, erhalte ich ... I: \ .... css: 1 (Funktion (exportiert, erfordert, Modul, __Dateiname, __Dirnname) {.filter-bg {^ SyntaxError: Unerwartetes Token.
JGleason
3
Oder verwenden Sie einen Reaktionshelm und injizieren Sie das CSS (falls es sich um eine URL handelt) in das <head> -Tag
Kira
53

Sie müssen CSS-Loader verwenden, wenn Sie ein Bundle mit Webpack erstellen.

Es installieren:

npm install css-loader --save-dev

Und fügen Sie es den Ladern in Ihren Webpack-Konfigurationen hinzu: 

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

Danach können Sie CSS-Dateien in js aufnehmen.

Alexandr Lazarev
quelle
1
Ich darf kein anderes Modul in dieses Projekt importieren. Funktioniert ihre andere Lösung nur mit Reactjs oder nativen Js?
Venter
Also ich denke , muss ich etwas wie folgt verwenden: HTMLElement.style
Venter
Es sieht ein bisschen hässlich aus. Warum dürfen Sie beim Erstellen von Bundles keine Änderungen hinzufügen?
Alexandr Lazarev
Es ist eine Nachbearbeitung für eine workship über reactjs und uns wurde gesagt , die Anforderungen mit den Modulen während workship enthalten zu lösen
Venter
Ok, aber ich wollte nur erwähnen, dass das Abrufen von Stil-Tags keine CSS-Dateien importiert , wie Sie in Ihrer Frage gefragt haben. Dies sind zwei verschiedene Probleme.
Alexandr Lazarev
31

Ich würde vorschlagen, CSS-Module zu verwenden:

Reagieren

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

Rendern der Komponente:

<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
quelle
Ich würde Teil 1 als Antwort unten hinzufügen. Und Sie können meiner Antwort folgen, um Ihre Komponente zu testen.
Mihir Patel
2
Wenn dies ausprobiert wird und es nicht funktioniert. Ich habe versucht, es so import styles from "./disabledLink.css";einzuschließen : und erhalte den folgenden Fehler: Modul nicht gefunden: Fehler: 'Datei' oder 'Verzeichnis' ./disabledLink.css kann nicht in c: \ Users \ Basti Kluth \ Documents \ pizza-app aufgelöst werden \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
Venter
1
CSS-Module sollten getrennt installiert werden, github.com/css-modules/css-modules
Alexandr Lazarev
1
Und wie kann ich eine Medienabfrage für einen solchen CSS-Typ schreiben?
Sonu Bamniya
18

Im Folgenden wird eine externe CSS-Datei in eine React-Komponente importiert und die CSS-Regeln auf <head />der Website ausgegeben.

  1. Installieren Sie Style Loader und CSS Loader :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. In webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. In einer Komponentendatei:
import './path/to/file.css';
Webars
quelle
Und ich benutze Babel, um Watcher zu betreiben. Vielleicht sieht es überhaupt nicht in die Datei webpack.config.js
Anton Danilchenko
Haben Sie CSS-Loader installiert? Außerdem sehe ich Ihre webpack.config.js nicht.
Webars
1
Sie können weitere Modulregeln im Objektformat als rulesArray-Wert hinzufügen .
Ari
3

Die oben genannten Lösungen sind vollständig geändert und veraltet. Wenn Sie CSS-Module verwenden möchten (vorausgesetzt, Sie haben CSS-Loader importiert) und ich habe so lange versucht, eine Antwort darauf zu finden, und habe es schließlich getan. Der Standard-Webpack-Loader ist in der neuen Version ganz anders.

In Ihrem Webpack müssen Sie ein Teil finden, das mit cssRegex beginnt, und es durch dieses ersetzen.

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}
Ugur Yilmaz
quelle
stackoverflow.com/questions/53572200/… Alternative Lösung
Maulik Sakhida
2

Mit CSS-Modulen können Sie denselben CSS-Klassennamen in verschiedenen Dateien verwenden, ohne sich Gedanken über Namenskonflikte machen zu müssen.

Button.module.css

.error {
  background-color: red;
}

another-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
quelle
1

  1. Installieren Sie Style Loader und CSS Loader:

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

  2. Webpack konfigurieren

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

In Fällen, in denen Sie nur einige Stile aus einem Stylesheet in eine Komponente einfügen möchten, ohne das gesamte Stylesheet zu bündeln, empfehle ich https://github.com/glortho/styled-import . Zum Beispiel:

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

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

HINWEIS: Ich bin der Autor dieser Bibliothek und habe sie für Fälle erstellt, in denen Massenimporte von Stilen und CSS-Modulen nicht die beste oder praktikabelste Lösung sind.

glortho
quelle
0

Sie können auch das gewünschte Modul verwenden.

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

Die Verwendung von extract-css-chunks-webpack-plugin und css-loader loader funktioniert für mich, siehe unten:

webpack.config.js Importiere das Extrakt-CSS-Chunks-Webpack-Plugin

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

webpack.config.js Fügen Sie die CSS-Regel hinzu . Extrahieren Sie zuerst CSS-Chunks, dann bettet der CSS-Loader CSS-Loader sie in das HTML-Dokument ein. Stellen Sie sicher, dass sich CSS-Loader und Extract-CSS-Chunks-Webpack-Plugin in package.json dev befinden Abhängigkeiten

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

webpack.config.js Instanz des Plugins erstellen

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

Und jetzt ist das Importieren von CSS möglich. Und jetzt kann ich in einer tsx-Datei wie index.tsx den Import wie diesen Import './Tree.css' verwenden, wobei Tree.css CSS-Regeln wie enthält

body {
    background: red;
}

Meine App verwendet Typoskript und dies funktioniert für mich. Überprüfen Sie mein Repo auf die Quelle: https://github.com/nickjohngray/staticbackeditor

Nick
quelle
-2

Sie können Ihre .cssDatei in eine .jsxDatei importieren

Hier ist ein Beispiel -

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