Как импортировать файл 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
Спасибо за любой вклад!
12 ответов
Вам нужно использовать css-загрузчик при создании пакета с wepback.
Установите это:
npm install css-loader --save-dev
И добавьте его в загрузчики в ваших конфигах веб-пакета:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
После этого вы сможете включить CSS-файлы в JS.
Вам даже не нужно называть его, если вам не нужно:
например
import React from 'react';
import './App.css';
полный пример см. здесь https://egghead.io/lessons/build-a-jsx-live-compiler
Я бы предложил использовать модули 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>
Следующее импортирует внешний файл CSS в компонент React и выводит правила CSS в <head /> веб-сайта.
- Установите Style 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';Модули 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>;
}
}
Приведенные выше решения полностью изменены и устарели. Если вы хотите использовать модули CSS (при условии, что вы импортировали css-загрузчики), я так долго пытался найти ответ на этот вопрос и, наконец, нашел. Загрузчик веб-пакетов по умолчанию в новой версии сильно отличается.
В вашем веб-пакете вам нужно найти часть, начинающуюся с cssRegex, и заменить ее этой;
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}),
}
Вы можете импортировать файл css, если файл css находится в той же папке, куда вы хотите импортировать, чем просто попробуйте это
импортировать './styles.css'
если файл css находится далеко от нашего компонента, перейдите в то место, где находится файл, и используйте это как
импортировать '../mainstyles/styles.css'
Вы также можете использовать необходимый модуль.
require('./componentName.css');
const React = require('react');
Установите загрузчик стилей и загрузчик CSS: npm install --save-dev style-loader npm install --save-dev css-loader
Настроить веб-пакет
module: { loaders: [ { test: /.css$/, загрузчик: 'style-loader' }, { test: /.css$/, загрузчик: 'css-loader', запрос: {modules: true, localIdentName: '[name][local] _[hash: base64: 5]'}}]}
В тех случаях, когда вы просто хотите внедрить некоторые стили из таблицы стилей в компонент без объединения во всю таблицу стилей, я рекомендую 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 не является лучшим или наиболее жизнеспособным решением.
У меня работают с использованием 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
Вы можете импортировать свой .css файл в .jsx файл
Вот пример -
import Content from '../content/content.jsx';