Как импортировать файл CSS в компонент React

Question 1

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

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

Модуль не найден: Ошибка: не удается разрешить «файл» или «каталог» ../../../public/styles/disabledLink в c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /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 Compiler как компонент React ).

Question 3

При создании пакета с веб-пакетом необходимо использовать css-loader .

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

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 />веб-сайта.

Установить стиль погрузчик и CSS погрузчик :

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

другой-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

Установите загрузчик стилей и загрузчик CSS:
```
npm install --save-dev style-loader
npm install --save-dev css-loader
```

Настроить webpack

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

У меня работают с использованием extract-css-chunks-webpack-plugin и загрузчика css-loader, см. Ниже:

webpack.config.js Импортировать extract-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, я могу использовать импорт, подобный этому import './Tree.css', где Tree.css содержит правила css, например

body {
    background: red;
}

Мое приложение использует машинописный текст, и это работает для меня, проверьте мое репо на источник: https://github.com/nickjohngray/staticbackeditor

Question 12

Вы можете импортировать свой .cssфайл в .jsxфайл

Вот пример -

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

Answer 1

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

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

Модуль не найден: Ошибка: не удается разрешить «файл» или «каталог» ../../../public/styles/disabledLink в c: \ Users \ User \ Documents \ pizza-app \ client \ src \ components @. /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.

Что я делаю не так и как это исправить?

Answer 2

Привет, что

случилось

Answer 3

Эй, ты прав, но все равно не работает. Я заметил, что не могу использовать импорт, потому что не могу использовать экспорт в файле CSS

Venter

Answer 4

используя этот способ stackoverflow.com/questions/39926493/…

ответ

Answer 5

Я получаю сообщение об ошибке -> экран только @media и (min-width: 320px) и (max-width: 640px) {^ SyntaxError: недопустимый или неожиданный токен в Module._compile (internal / modules / cjs / loader.js: 723 : 23)

Садананд

Answer 6

150

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

например

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

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

code4jhon
источник

4

У меня не работает, когда я пытаюсь запустить mocha с регистром babel, я получаю ... I: \ .... css: 1 (function (exports, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: Неожиданный токен.

JGleason,

3

Или используйте react-шлем и вставьте css (если это URL-адрес) в тег <head>

Кира

Answer 7

4

У меня не работает, когда я пытаюсь запустить mocha с регистром babel, я получаю ... I: \ .... css: 1 (function (exports, require, module, __filename, __dirname) {.filter-bg {^ SyntaxError: Неожиданный токен.

JGleason,

Answer 8

3

Или используйте react-шлем и вставьте css (если это URL-адрес) в тег <head>

Кира

Answer 9

52

При создании пакета с веб-пакетом необходимо использовать css-loader .

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

npm install css-loader --save-dev

И добавляем его в загрузчики в конфигах веб-пакетов:

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

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

Александр Лазарев
источник

1

Мне не разрешено импортировать в этот проект другой модуль. Их другое решение работает только с reactjs или родным js?

Venter

Поэтому я думаю , что я должен использовать что - то вроде этого: HTMLElement.style

брюшко

Выглядит немного некрасиво. Почему вам не разрешено вносить изменения в сборку пакетов?

Александр Лазарев

Это постобработки для workship о reactjs , и мы сказали , чтобы решить требования с модулями , включенных во workship

брюшко

Хорошо, но просто хотел упомянуть, что выборка тегов стиля не импортирует файлы css, как вы задали в своем вопросе. Это 2 разные проблемы.

Александр Лазарев

Answer 10

1

Мне не разрешено импортировать в этот проект другой модуль. Их другое решение работает только с reactjs или родным js?

Venter

Answer 11

Поэтому я думаю , что я должен использовать что - то вроде этого: HTMLElement.style

брюшко

Answer 12

Выглядит немного некрасиво. Почему вам не разрешено вносить изменения в сборку пакетов?

Александр Лазарев

Answer 13

Это постобработки для workship о reactjs , и мы сказали , чтобы решить требования с модулями , включенных во workship

брюшко

Answer 14

Хорошо, но просто хотел упомянуть, что выборка тегов стиля не импортирует файлы css, как вы задали в своем вопросе. Это 2 разные проблемы.

Александр Лазарев

Answer 15

31

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

Михир Патель
источник

Я бы добавил часть 1 как ответ ниже. И вы можете следовать моему ответу, чтобы проверить свой компонент.

Mihir Patel

2

Если попробовать это, и это не сработает. Я попытался включить его так: import styles from "./disabledLink.css";и получил следующую ошибку: Модуль не найден: Ошибка: не удается разрешить 'файл' или 'каталог' ./disabledLink.css в c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49

Venter

1

css модули следует устанавливать отдельно, github.com/css-modules/css-modules

Александр Лазарев,

1

И как мне написать медиа-запрос для такого типа CSS, любой Идеи?

Sonu Bamniya

Answer 16

Я бы добавил часть 1 как ответ ниже. И вы можете следовать моему ответу, чтобы проверить свой компонент.

Mihir Patel

Answer 17

2

Если попробовать это, и это не сработает. Я попытался включить его так: import styles from "./disabledLink.css";и получил следующую ошибку: Модуль не найден: Ошибка: не удается разрешить 'файл' или 'каталог' ./disabledLink.css в c: \ Users \ Basti Kluth \ Documents \ pizza-app \ client \ src \ components @ ./client/src/components/ShoppingCartLink.js 19: 20-49

Venter

Answer 18

1

css модули следует устанавливать отдельно, github.com/css-modules/css-modules

Александр Лазарев,

Answer 19

1

И как мне написать медиа-запрос для такого типа CSS, любой Идеи?

Sonu Bamniya

Answer 20

18

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

Установить стиль погрузчик и CSS погрузчик :

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

Вебары
источник

И я использую babel для запуска наблюдателя. Может, он вообще не видит файл webpack.config.js

Антон Данильченко

Вы установили css-loader? Также я не вижу вашего webpack.config.js.

Webars

1

Вы можете добавить дополнительные правила модуля в объектном формате в качестве rulesзначения массива.

Ари

Answer 21

И я использую babel для запуска наблюдателя. Может, он вообще не видит файл webpack.config.js

Антон Данильченко

Answer 22

Вы установили css-loader? Также я не вижу вашего webpack.config.js.

Webars

Answer 23

1

Вы можете добавить дополнительные правила модуля в объектном формате в качестве rulesзначения массива.

Ари

Answer 24

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

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

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

Answer 25

stackoverflow.com/questions/53572200/… Альтернативное решение

Маулик Сахида

Answer 26

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

Button.module.css

.error {
  background-color: red;
}

другой-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>;
  }
}

Answer 27

Установите загрузчик стилей и загрузчик CSS:
```
npm install --save-dev style-loader
npm install --save-dev css-loader
```

Настроить webpack

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

Answer 28

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

Answer 29

0

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

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

Хуан Наваррете
источник

Answer 30

У меня работают с использованием extract-css-chunks-webpack-plugin и загрузчика css-loader, см. Ниже:

webpack.config.js Импортировать extract-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, я могу использовать импорт, подобный этому import './Tree.css', где Tree.css содержит правила css, например

body {
    background: red;
}

Мое приложение использует машинописный текст, и это работает для меня, проверьте мое репо на источник: https://github.com/nickjohngray/staticbackeditor

Answer 31

-2

Вы можете импортировать свой .cssфайл в .jsxфайл

Вот пример -

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

Саураб Рамчандрарао Кулкарни
источник

Как импортировать файл CSS в компонент React

Ответы: