React component library - getting stylus to work

Question

I am using this library https://github.com/facebook/create-react-app

I am trying to get stylus work

What i have done so far is

npm install --save-dev stylus

and

npm install --save-dev stylus-loader

And then added to the package.json ,

"build-css": "stylus src/ -o src/",
"watch-css": "npm run build-css && stylus src/ -o src/ --watch --recursive",

as stated in the library's documentation

There is no explicit webpack file in this library

Answer 1

I had the same problem and I found this solution which you can check on the link below, but is also here transcribed for reference :

Solution 1

How to use Stylus with Create React App

First, you’ll need to install Stylus if you haven’t already:

npm install stylus -g

Next, you need to create your new React Application:

create-react-app my_app
cd my_app
mkdir src/static/stylus

Now you need to install the npm-run-all package:

npm install --save-dev npm-run-all

For the final step, you will have to remove the build and start scripts from package.json and replace them with the following:

"build-css": "stylus -c src/static/stylus/ --out src/static/css",
"watch-css": "npm run build-css && stylus -c -w src/static/stylus/ --out src/static/css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js"

Now you can run your app normally with

npm start

and have all of your stylus scripts compiled every time your app reloads.

Solution 2

I did not try this one but maybe it's also worthy to check :

create-react-app-stylus

Basically install the npm module :

npm install create-react-app-stylus --save-dev

Then replace your start and build scripts in your package.json.

"scripts": {
  "start": "react-scripts-with-stylus start path/to/main.styl",
  "build": "react-scripts-with-stylus build path/to/main.styl",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
},

Conclusion:

I got it working fine, now I'm just trying to find a way to make it work within each component's folder.