I want the classes in my React.js application to be available for export from .styl-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.

I found a guide to setting up CSS Modules in an application created with Create React App.
I understand that you need to run npm run eject and somehow rewrite configuration files,
but how – I don't understand.

I want the classes in my React.js application to be available for export from .styl-files in the same way as it can be done from CSS Modules, but I can't find any ready-made solution to this problem.

I found a guide to setting up CSS Modules in an application created with Create React App.
I understand that you need to run npm run eject and somehow rewrite configuration files,
but how – I don't understand.

• javascript
• reactjs
• webpack
• create-react-app
• stylus

• Have you tried npmjs.com/package/css-modules-stylus ? (Take a look at Babel Plugin section) – Roman Maksimov Commented Aug 31, 2018 at 8:36

5 Answers 5

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']

Run-time solution ( without eject )

install react-rewired and customize-cra to have an option to update config on run-time

npm i react-app-rewired
npm i customize-cra

create file config-overrides.js in the package.json folder with content :

const {
    override,
    addWebpackModuleRule
  } = require("customize-cra");

module.exports = override(
    addWebpackModuleRule({
      test: /\.styl$/,
      exclude: /(node_modules)/,
      loaders: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {url: false}
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: (loader) => [require('autoprefixer')()]
          }
        },
        'stylus-loader'
      ]
    }),
    addWebpackModuleRule({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
      ]
    })
);

install stylus

npm i stylus
npm i stylus-loader
npm i css-loader 

change your start / build scripts to use react-rewired

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
...

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

require('./style/index.styl');

OR

import style from './СomponentStyle.styl'; --> className={style.container} 

This all :) Additional thanks to Denis Bubnov in current topic - you helped me much to implement current solution!

Here is the link to configure stylus with create react app

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

I like Surya's approach.

1. install stylus with

npm install stylus --save-dev

2. Create 2 folders /src/styl and /src/css
3. Drop some files into /src/styl.
4. Add the following scripts to your package.json:

    "stylus:watch": "stylus -I ./node_modules -w ./src/styl -o ./src/css",
    "stylus": "stylus -I ./node_modules ./src/styl -o ./src/css"

5. Run npm run stylus:watch in a second terminal. It will watch all files in /src/styl and compile them to css in /src/css where they will be picked up by your React dev server.
6. Before building your react app, make sure to run npm run stylus one last time.

This is how I made it work

1. Create a React-Parcel project
   i) first create a parcel project (Get started)
   ii) Add React to your parcel project (Add React)
   iii) Optional: Add typescript to your parcel project (Add Typescript)
2. Add Stylus to your React-Parcel project (Add Stylus)

What is Parcel?

• Parcel is a tool that lets us combine the technologies we love. In other words, it is a JS bundler.
• And the best part is that we don't need to eject stuff and we don't need to install webpack.
• It currently supports the most popular technologies such as:
  • Vue
  • React
  • Pug
  • Graphql
  • SugarSS
  • Stylus
  • Less
  • Sass
  • Typescript
  • Coffeescript
  • Elm
  • And more!
• It is scalable, lightning-fast and very popular. I effeminately recommend it.