How to configure Stylus support in a React.js application?

You need to install next npm-packages in your project:

• stylus
• stylus-loader
• css-loader

In webpack.config, in section module you need to add next points:

{
  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',
  ],
},

Then you can import your styles from .styl files in your React components like this:

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

and you can use style by CSS name for example:

className={style.container} 

where container - it is name of CSS but without dot. For complicated names like: .container-btn-green you need write next code: style.containerBtnGreen or style['container-btn-green']