it-swarm.com.de

Wie importiere ich eine CSS-Datei in eine React-Komponente?

Wie der Titel sagt, möchte ich eine CSS-Datei in eine React-Komponente importieren. Ich habe folgendes versucht:

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

Aber ein Fehler zeigt mir das:

Modul nicht gefunden: Fehler: Kann 'Datei' oder 'Verzeichnis' nicht auflösen ../../../public/styles/disabledLink in c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19: 20-66
Hash: 2d281bb98fe0a961f7c4
Version: Webpack 1.13.2

Die Datei befindet sich in diesem Pfad:

C:\Benutzer\Benutzer\Dokumente\pizza-app\client\public\styles\disabledLink.css

Mir scheint es, als ob Import nicht den richtigen Weg sucht. Ich dachte, mit ../../../ würde es den Pfad der drei Ordnerebenen oben nachschlagen. 

Die Datei, die die CSS-Datei importieren soll, befindet sich hier:

C:\Benutzer\Benutzer\Dokumente\pizza-app\client\src\components\ShoppingCartLink.js

Danke für jeden Input!

46
venter

Sie müssen css-loader verwenden, wenn Sie ein Paket mit wepback erstellen. 

Es installieren:

npm install css-loader --save-dev

Und fügen Sie es 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. 

42

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

z.B.

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

ein vollständiges Beispiel finden Sie hier https://egghead.io/lessons/build-a-jsx-live-compiler

87

Ich würde die Verwendung von CSS-Modulen vorschlagen:

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

Folgendes importiert eine externe CSS-Datei in eine React-Komponente und gibt die CSS-Regeln im <head /> der Website aus.

  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';
12
Webars
  1. Installieren Sie Style Loader und CSS Loader: Npm install --save-dev style-loader Npm install --save-dev css-loader

  2. Konfigurieren Sie das Webpack

modul: { Lader: [ { Test: /.css$/, loader: 'style-loader' }, { Test: /.css$/, loader: 'css-loader', Abfrage: { Module: wahr, localIdentName: '[name] [local] _ [hash: base64: 5]' } } ] }

1
Bertwin Romero

Wenn 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 entwickelt, in denen Massenimporte von Styles und CSS-Modulen nicht die beste oder praktikabelste Lösung sind.

0
glortho

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

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