Как настроить поддержку Stylus в приложении React.js?

Question

Я хочу, чтобы классы в моем приложении React.js были доступны для экспорта из .styl -файлов так же, как это можно сделать из CSS-модулей, но я не могу найти никакого готового решения для этого проблема.

Я нашел руководство по настройке модулей CSS в приложении, созданном с помощью приложения Create React.
Я так понимаю, вам нужно запустить npm run eject и как-то переписать файлы конфигурации,
но как - я не понимаю.

Answer 1

Вам необходимо установить следующие npm-пакеты в вашем проекте:

• стилус
• стилус-загрузчик
• CSS-погрузчик

В webpack.config, в разделе module необходимо добавить следующие пункты:

{
  test: /\.styl$/,
  use: [
    'style-loader',
    'css-loader?modules&camelCase&localIdentName=[path]__[name]__[local]--[hash:base64:5]',
    'stylus-loader',
  ],
},
{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
  ],
},

Затем вы можете импортировать ваши стили из файлов .styl в ваши компоненты React следующим образом:

import style from './СomponentStyle.styl'; 

и вы можете использовать стиль по имени CSS, например:

className={style.container} 

где container - это имя CSS, но без точки. Для сложных имен, таких как: .container-btn-green, вам нужно написать следующий код: style.containerBtnGreen или style['container-btn-green']

Answer 2

Вот ссылка для настройки стилуса с приложением create response

https://github.com/flexzuu/create-react-app-styl