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

I found instructions for configuring CSS Modules in an application created using the Create React App. I understand that I need to npm run eject and somehow rewrite the configuration files, but I don’t understand how.

1 answer 1

Install three npm packages into your project:

In the webpack configuration file, in the module section add the following items:

 { 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 we simply import the styles into the reactant components, like so:

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

and use in the code through names like so for example:

 className={style.container}

where container is the class name from CSS without a dot, but for such a name, for example: