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

Question

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.

Lyall

Have you tried npmjs.com/package/css-modules-stylus ? (Take a look at Babel Plugin section) – Saki

Answer 1

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

Disqualify

Answer 2

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!

Fulfillment

Hi Konstantin, I tried using your approach but as soon as I try to import a .styl file I get the following error: ``` ./src/app.styl (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-1!./node_modules/postcss-loader/src??postcss!./node_modules/stylus-loader/dist/cjs.js!./src/app.styl) TypeError: this.getOptions is not a function ``` ... some googling suggests that this might be caused by the webpack version that CRA uses. Have you come across this error before? – Histone

Okay, I think I solved it: github.com/webpack-contrib/stylus-loader/releases/tag/v5.0.0 -> after downgrading to [email protected] it works as expected. – Histone

Will try to use stylus-loader and update the solution.... – Fulfillment

Answer 3

Here is the link to configure stylus with create react app

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

Academic

Answer 4

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.

Edelmiraedelson

Answer 5

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.

Eyecup