Як імпортувати файл CSS у компонент React

Question 1

Я хочу імпортувати файл CSS у компонент реакції.

Я пробував, import disabledLink from "../../../public/styles/disabledLink";але отримую помилку нижче;

Модуль не знайдено: Помилка: Не вдається вирішити файл або каталог. /client/src/components/ShoppingCartLink.js 19: 20-66 Хеш: 2d281bb98fe0a961f7c4 Версія: webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css - розташування файлу CSS, який я намагаюся завантажити.

Мені здається, що імпорт не шукає правильний шлях.

Я думав, що з ../../../ним почнемо шукати шлях вище трьох шарів папок.

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js - розташування файлу, який повинен імпортувати файл CSS.

Що я роблю не так і як я можу це виправити?

Question 2

Вам навіть не потрібно називати його, якщо вам не потрібно:

напр

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

дивіться повний приклад тут ( Створіть компілятор JSX Live як компонент React ).

Question 3

Вам потрібно використовувати css-loader під час створення пакета з webpack.

Встановіть його:

npm install css-loader --save-dev

І додайте його до завантажувачів у налаштуваннях веб-пакета:

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

Після цього ви зможете включати css-файли в js.

Question 4

Я б запропонував використовувати модулі CSS:

Зреагуйте

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

Візуалізація компонента:

<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

Далі імпортується зовнішній файл CSS у компонент React та виводяться правила CSS у <head />веб-сайт.

Встановіть Load Loader і CSS Loader :

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

У webpack.config.js:

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

У файлі компонента:

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

Question 6

Наведені вище рішення повністю змінені та застарілі. Якщо ви хочете використовувати модулі CSS (припускаючи, що ви імпортували css-навантажувачі), я так довго намагався знайти відповідь на це і нарешті. Завантажувач веб-пакунків за замовчуванням зовсім інший у новій версії.

У вашому веб-пакеті вам потрібно знайти частину, що починається з cssRegex, і замінити її на цю;

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

Question 7

Модулі CSS дозволяють використовувати одне і те ж ім’я класу CSS у різних файлах, не турбуючись про зіткнення імен.

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

Question 8

Встановіть Load Loader і CSS Loader:

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

Налаштуйте веб-пакет

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

Question 9

У тих випадках, коли ви просто хочете ввести деякі стилі з таблиці стилів у компонент, не зв’язуючи цілу таблицю стилів, я рекомендую https://github.com/glortho/styled-import . Наприклад:

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

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

ПРИМІТКА. Я автор цієї бібліотеки і створив її для випадків, коли масовий імпорт стилів та модулів CSS не є найкращим чи найбільш життєздатним рішенням.

Question 10

Ви також можете використовувати необхідний модуль.

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

Question 11

Використання екстракту-css-chunks-webpack-plugin та css-loader працює для мене, див. Нижче:

webpack.config.js Імпортувати екстракт-css-chunks-webpack-plugin

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

webpack.config.js Додайте правило css, спочатку витягніть фрагменти css , потім завантажувач css css-loader вбудує їх у html-документ, переконайтесь, що css-loader та extract-css-chunks-webpack-plugin знаходяться в package.json dev залежності

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

webpack.config.js Зробити екземпляр плагіна

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

І тепер імпорт css можливий. І тепер у файлі tsx, наприклад index.tsx, я можу використовувати імпорт, подібний цьому імпорту './Tree.css', де Tree.css містить правила css, такі як

body {
    background: red;
}

У моєму додатку використовується машинопис, і це працює для мене, перевірте моє репо для джерела: https://github.com/nickjohngray/staticbackeditor

Question 12

Ви можете імпортувати .cssфайл у .jsxфайл

Ось приклад -

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