Jak zaimportować plik CSS do komponentu React

Question 1

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

Question 2

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

Question 3

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.

Question 4

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>

Question 5

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

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

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

W webpack.config.js:

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

W pliku komponentu:

import './path/to/file.css';

Question 6

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]'
  }),
}

Question 7

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

Question 8

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

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

Skonfiguruj pakiet internetowy

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

Question 9

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.

Question 10

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

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

Question 11

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

Question 12

Możesz zaimportować swój .cssplik w formacie.jsx pliku

Oto przykład -

import Content from '../content/content.jsx';

Answer 1

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

javascript reactjs relative-path łono
źródło

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

używając w ten sposób stackoverflow.com/questions/39926493/ ...

anson

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

Answer 2

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

Steeve Pitis

Answer 3

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

Answer 4

używając w ten sposób stackoverflow.com/questions/39926493/ ...

anson

Answer 5

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

Answer 6

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

code4jhon
źródło

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,

Answer 7

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,

Answer 8

3

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

Kira,

Answer 9

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.

Alexandr Lazarev
źródło

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

Answer 10

1

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

venter

Answer 11

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

venter

Answer 12

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

Alexandr Lazarev

Answer 13

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

venter

Answer 14

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

Answer 15

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>

Mihir Patel
źródło

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,

Answer 16

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

Mihir Patel

Answer 17

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

Answer 18

1

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

Alexandr Lazarev

Answer 19

1

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

Sonu Bamniya,

Answer 20

18

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

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

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

W webpack.config.js:

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

W pliku komponentu:

import './path/to/file.css';

Webary
źródło

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

Answer 21

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

Anton Danilchenko

Answer 22

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

Webars

Answer 23

1

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

Ari

Answer 24

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]'
  }),
}

Answer 25

stackoverflow.com/questions/53572200/… Alternatywne rozwiązanie

Maulik Sakhida

Answer 26

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

Answer 27

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

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

Skonfiguruj pakiet internetowy

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

Answer 28

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.

Answer 29

0

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

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

Juan Navarrete
źródło

Answer 30

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

Answer 31

-2

Możesz zaimportować swój .cssplik w formacie.jsx pliku

Oto przykład -

import Content from '../content/content.jsx';

Saurabh Ramchandrarao Kulkarni
źródło

Jak zaimportować plik CSS do komponentu React

Odpowiedzi: