javascript - Cum să imporți un fișier CSS într-un component React

Vreau să import un fișier CSS într-un component React.

Am încercat import disabledLink from "../../../public/styles/disabledLink"; dar primesc eroarea de mai jos;

Modulul nu a fost găsit: Eroare: Nu se poate rezolva 'file' sau 'directory' ../../../public/styles/disabledLink în c:\Users\User\Documents\pizza-app\client\src\components @ ./client/src/components/ShoppingCartLink.js 19:20-66 Hash: 2d281bb98fe0a961f7c4 Versiune: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css este locația fișierului CSS pe care încerc să-l încarc.

Mi se pare că importul nu caută calea corectă.

Am crezut că cu ../../../ va începe să caute calea cu trei niveluri de foldere mai sus.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js este locația fișierului care ar trebui să importe fișierul CSS.

Ce fac greșit și cum pot să repar?

Răspuns #1

Nici măcar nu trebuie să-i dai un nume dacă nu ai nevoie:

de ex.

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

vezi un exemplu complet aici (Construiește un compilator JSX live ca un component React).

Răspunsul #2

Trebuie să folosești css-loader atunci când creezi un pachet cu webpack.

Instalează-l:

npm install css-loader --save-dev

Și adaugă-l la loader-ele din configurațiile tale webpack:

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

După aceasta, vei putea include fișiere CSS în JS.

Răspunsul #3

Aș sugera să folosești module CSS:

React

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

Redarea componentei:

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

Răspunsul #4

Următorul importă un fișier CSS extern într-un component React și afișează regulile CSS în <head /> al site-ului web.

1. Instalează Style Loader și CSS Loader:

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

2. În webpack.config.js:

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

3. Într-un fișier de componentă:

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