How to use Stylus with Create React App

Using create-react-app makes it easy to get started writing a new React application, but the documentation only outlines how to use Sass in your development workflow.  I can’t be the only person who prefers using Stylus, so here’s a quick guide to getting Stylus up and running in your new create-react-app workspace!

NPM Run All

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 🙂

Ty Author

Leave a Reply

Your email address will not be published. Required fields are marked *