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

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.

Installieren Sie Style Loader und CSS Loader :

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

In webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

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

Installieren Sie Style Loader und CSS Loader:

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

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