How to Use Stylus in a Project

Setting Up Stylus

Stylus runs on Node.js. Here's how to add it to your project and compile.

Step 1: Install

npm install stylus --save-dev

Step 2: Write a .styl File

// styles.styl
primary = #2563eb
body
  background primary
  font-family sans-serif

Step 3: Compile

# CLI
npx stylus styles.styl -o styles.css

# Watch mode
npx stylus -w styles.styl

Step 4: Use in a Bundler

// webpack
npm install stylus-loader --save-dev
// Add stylus-loader to webpack rules

// Vite — supported out of the box
// just import a .styl file

Organising Files

@import 'variables'
@import 'mixins'
@import 'components/buttons'

FAQs

Does Vite support Stylus?

Yes — just install stylus and import .styl files. More in our Stylus guides.

How do I minify output?

Add the -c (compress) flag to the CLI.