Jak zaimportować plik CSS do komponentu React


89

Chcę zaimportować plik CSS do komponentu reagowania.

Próbowałem, import disabledLink from "../../../public/styles/disabledLink";ale pojawia się poniższy błąd;

Nie znaleziono modułu: Błąd: nie można znaleźć „pliku” lub „katalogu” ../../../public/styles/disabledLink w c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /client/src/components/ShoppingCartLink.js 19: 20-66 Hash: 2d281bb98fe0a961f7c4 Wersja: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css to lokalizacja pliku CSS, który próbuję załadować.

Wydaje mi się, że import nie szuka właściwej ścieżki.

Pomyślałem, że dzięki ../../../temu zacznie szukać ścieżki trzy warstwy folderów powyżej.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js to lokalizacja pliku, do którego należy zaimportować plik CSS.

Co robię źle i jak mogę to naprawić?


Hej, co słychać: D, wygląda na to, że tylko dwa foldery powyżej (komponenty i src)
Steeve Pitis

Hej, masz rację, ale to nadal nie działa. Zauważyłem, że nie mogę używać importu, ponieważ nie mogę używać eksportu w pliku CSS
venter


Otrzymuję błąd -> ekran tylko @media i (min-width: 320px) i (max-width: 640px) {^ SyntaxError: Invalid or nieoczekiwany token w Module._compile (internal / modules / cjs / loader.js: 723 : 23)
Sadanand

Odpowiedzi:


150

Nie musisz nawet nadawać mu nazwy, jeśli nie musisz:

na przykład

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

zobacz pełny przykład tutaj ( zbuduj kompilator JSX Live jako komponent reagujący ).


4
Nie działa dla mnie, kiedy próbuję uruchomić mokkę z rejestrem Babel, otrzymuję ... I: \ .... css: 1 (function (export, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: Nieoczekiwany token.
JGleason,

3
Lub użyj React-Helmet i wstaw css (jeśli jest to adres URL) w tagu <head>
Kira,

52

Musisz użyć Podczas tworzenia pakietu z pakietem internetowym ładującego css .

Zainstaluj to:

npm install css-loader --save-dev

I dodaj go do programów ładujących w konfiguracjach pakietu internetowego:

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

Następnie będziesz mógł dołączyć pliki css do js.


1
Nie mogę zaimportować innego modułu do tego projektu. Czy ich inne rozwiązanie działa tylko z actjs lub native js?
venter

Więc myślę, że muszę użyć czegoś takiego: HTMLElement.style
venter

Wygląda trochę brzydko. Dlaczego nie możesz dodawać zmian w budowaniu pakietów?
Alexandr Lazarev

Jest to postprocessing dla statku roboczego dotyczącego reagjów i mamy rozwiązać wymagania za pomocą modułów dołączonych podczas pracy
venter

Ok, ale chciałem tylko wspomnieć, że pobieranie tagów stylu nie importuje plików css, jak zadałeś w swoim pytaniu. To są 2 różne kwestie.
Alexandr Lazarev

31

Sugerowałbym użycie modułów CSS:

Reagować

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

Renderowanie komponentu:

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

Dodałbym część 1 jako odpowiedź poniżej. I możesz skorzystać z mojej odpowiedzi, aby przetestować swój komponent.
Mihir Patel

2
Jeśli wypróbowałeś to i nie działa. Próbowałem dołączyć to w ten sposób: import styles from "./disabledLink.css";i otrzymałem następujący błąd: Nie znaleziono modułu: Błąd: Nie można rozwiązać „pliku” lub „katalogu” ./disabledLink.css w c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49
venter

1
moduły css powinny być instalowane osobno, github.com/css-modules/css-modules
Alexandr Lazarev

1
A jak mogę napisać zapytanie o media dla tego typu CSS, dowolny pomysł?
Sonu Bamniya,

18

Poniższe polecenie importuje zewnętrzny plik CSS do komponentu React i wyświetla reguły CSS w <head />witrynie.

  1. Zainstaluj moduł ładujący stylów i moduł ładujący CSS :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. W webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. W pliku komponentu:
import './path/to/file.css';

Używam Babel do uruchomienia obserwatora. Może w ogóle nie widzi pliku webpack.config.js
Anton Danilchenko

Czy zainstalowałeś program ładujący css? Nie widzę również twojego webpack.config.js.
Webars

1
Możesz dodać więcej reguł modułu w formacie obiektowym jako ruleswartość tablicy.
Ari

3

Powyższe rozwiązania zostały całkowicie zmienione i nieaktualne. Jeśli chcesz korzystać z modułów CSS (zakładając, że zaimportowałeś css-loadery) i próbowałem znaleźć na to odpowiedź przez tak długi czas i w końcu to zrobiłem. W nowej wersji domyślny program ładujący webpack jest zupełnie inny.

W swoim pakiecie internetowym musisz znaleźć część zaczynającą się od cssRegex i zastąpić ją tym;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}


1

Moduły CSS pozwalają na używanie tej samej nazwy klasy CSS w różnych plikach bez martwienia się o konflikty nazw.

Button.module.css

.error {
  background-color: red;
}

inny arkusz stylów.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>;
  }
}

1
  1. Zainstaluj moduł ładujący stylów i moduł ładujący CSS:

    npm install --save-dev style-loader
    npm install --save-dev css-loader
    
  2. Skonfiguruj pakiet internetowy

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

0

W przypadkach, gdy chcesz po prostu wstrzyknąć niektóre style z arkusza stylów do komponentu bez łączenia w cały arkusz stylów, polecam https://github.com/glortho/styled-import . Na przykład:

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

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

UWAGA: Jestem autorem tej biblioteki i zbudowałem ją dla przypadków, w których masowe importowanie stylów i modułów CSS nie jest najlepszym lub najbardziej realnym rozwiązaniem.


0

Możesz również użyć wymaganego modułu.

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

0

Korzystanie z extract-css-chunks-webpack-plugin i css-loader działa dla mnie, patrz poniżej:

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

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

webpack.config.js Dodaj regułę css, najpierw wyodrębnij fragmenty css, a następnie program ładujący css css-loader osadzi je w dokumencie html, upewnij się, że css-loader i extract-css-chunks-webpack-plugin znajdują się w pakiecie.json dev zależności

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

webpack.config.js Utwórz instancję wtyczki

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

A teraz import css jest możliwy A teraz w pliku tsx, takim jak index.tsx, mogę użyć importu takiego jak ten import „./Tree.css”, gdzie Tree.css zawiera reguły css, takie jak

body {
    background: red;
}

Moja aplikacja używa maszynopisu i to działa dla mnie, sprawdź moje repozytorium dla źródła: https://github.com/nickjohngray/staticbackeditor


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.