Решения выше полностью изменены и удержаны от использования. Если Вы хотите использовать css модули (предполагающий импорт css-загрузчиков), и я пытался найти ответ для этого в течение такого долгого времени и наконец сделал. Значение по умолчанию webpack загрузчик очень отличается в новой версии.
в Вашем webpack, необходимо найти часть, запускающуюся с cssRegex, и заменить его этим;
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
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`.
ПРИМЕЧАНИЕ: Я - автор этого lib, и я создал его для случаев, где массовый импорт стилей и модулей CSS не является лучшим или наиболее эффективным решением.
Можно также использовать необходимый модуль.
require('./componentName.css');
const React = require('react');
Можно импортировать Ваш .css
файл в .jsx
, файл
Здесь является примером -
import Content from '../content/content.jsx';