it-swarm.com.ru

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

Как видно из заголовка, я хочу импортировать файл CSS в компонент реагирования. Я пробовал следующее:

import disabledLink from "../../../public/styles/disabledLink";

Но ошибка показывает мне это:

Модуль не найден: Ошибка: не удается разрешить файл или каталог ../../../public/styles/disabledLink в c:\Users\Пользователь\Documents\pizza-app\client\src\components @. /client/src/components/ShoppingCartLink.js 19: 20-66
Хеш: 2d281bb98fe0a961f7c4
Версия: webpack 1.13.2

Файл находится по этому пути:

C:\Users\User\Documents\пицца-приложение\клиент\Public\Стили\disabledLink.css

Мне кажется, что импорт не ищет правильный путь. Я подумал, что с ../../../ он начнет искать путь тремя слоями папок выше.

Файл, который должен импортировать файл CSS, находится здесь:

C:\Users\User\Documents\пицца-приложение\клиент\\ SRC компоненты\ShoppingCartLink.js

Спасибо за любой вклад!

55
venter

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

например.

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

полный пример см. здесь https://egghead.io/lessons/build-a-jsx-live-compiler

87
Jonathan Caballero

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

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

npm install css-loader --save-dev

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

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

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

42
Alexandr Lazarev

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

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

  1. Установить Загрузчик стилей и Загрузчик CSS :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. В webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. В файле компонента:
import './path/to/file.css';
12
Webars
  1. Установить загрузчик стилей и загрузчик CSS: Npm установить --save-dev style-loader Npm установить --save-dev css-loader

  2. Настроить веб-пакет

модуль: { грузчики: [ { test: /.css$/, loader: 'style-loader' }, { test: /.css$/, загрузчик: 'css-loader', запрос: { модули: правда, localIdentName: '[name] [local] _ [hash: base64: 5]' } } ] }

1
Bertwin Romero

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

0
glortho