Using Stylus with Vue.js / Nuxt.js

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.

stylus/stylus

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
// or
yarn 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: https://discord.gg/Qwphtkv

Expressive, dynamic, robust CSS

How to use stylus in .vue style tag with lang attribute · Issue #2746 · nuxt/nuxt.js