Как импортировать файл css в компонент реакции?

Ответ 1

Вам даже не нужно называть его, если вам не нужно:

например,

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

см. полный пример здесь (Создайте JSX Live Compiler в качестве компонента React).

Ответ 2

Вам нужно использовать css-loader при создании пакета с помощью wepback.

Установите его:

npm install css-loader --save-dev

И добавьте его в загрузчики в своих конфигурациях webpack:

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

После этого вы сможете включить css файлы в js.

Ответ 3

Я бы предложил использовать 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>

Ответ 4

Следующий импортирует внешний файл CSS в компонент React и выводит правила CSS в <head/> веб-сайта.

1. Установите загрузчик стиля и загрузчик CSS:

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

2. В webpack.config.js:

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

3. В файле компонента:

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

Ответ 5

1. Установить загрузчик стиля и загрузчик CSS: npm install --save-dev style-loader npm install --save-dev css-loader

2. Настроить webpack

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

Ответ 6

В тех случаях, когда вы просто хотите внедрить некоторые стили из таблицы стилей в компонент без объединения во всю таблицу стилей, я рекомендую 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 не является лучшим или наиболее жизнеспособным решением.

Ответ 7

Как применить стили из нескольких файлов .css? У меня есть файл - body.css, и я импортировал так же, как показано ниже: импортировать стили из '../styles/body.css'; Но когда я пытаюсь применить стиль, определенный в css, для реагирования на компонент, он не работает следующим образом: <div className={styles.box}> [.box - это стиль класса, определенный в .css]. Он работает следующим образом: <div className="box">

Ответ 8

Как импортировать файл CSS-модулей в JS файл в React JS Я попробовал этот вариант, "Импорт стилей из"../components/Color.module.css "; Но это не сработало.

Ответ 9

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

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

Ответ 10

Указанные выше решения полностью изменены и устарели. Если вы хотите использовать модули css (при условии, что вы импортировали css-загрузчики), и я пытался найти ответ на этот вопрос в течение столь длительного времени, и, наконец, сделал это. Загрузчик веб-пакетов по умолчанию в новой версии сильно отличается.

в вашем веб-пакете вам нужно найти деталь, начинающуюся с cssRegex, и заменить ее на эту;

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