Using Stylus with Vue.js / Nuxt.js

Raymond
Raymond
Jul 25 · 2 min read

Stylus is still a vibrant community today!

For those of you whom never heard of stylus, it is similar to sass / scss / less. It’s a CSS pre-processor that make front-end development iterate faster and simpler.

Assumptions:

  1. You have a vue project already installed
  2. You know what yarn or npm is

OK! Lets get started

1. Install Stylus and Stylus-loader

npm install stylus stylus-loader -save-dev// oryarn install stylus stylus-loader --save-dev

2. Update Vue Components with lang=”stylus”

Note: inside the style tag the lang="stylus" must be present to work. Otherwise, it would recognize it as CSS instead of stylus. It’s required that every component that you are writing stylus syntax in.

If everything compiles. You’re good to go!

Cheers!

If this post was helpful

Reference:

Discord link for stylus support:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade