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.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store