How to Use SCSS in Vue.js CLI Project

Published on July 2, 2020 26 sec read

If we forget to select any CSS preprocessors at the time of creating CLI Vue app, we can add later easily. Today I’m going to show how to enable SCSS in our Vue project.

Table of Contents

  1. Install Dependencies
  2. Use in Component
  3. Use in External File

Install Dependencies

Install CSS preprocessor dependencies using this command:

npm install --save-dev node-sass sass-loader

Use in Component

Inside our application components, we can use like:

<style lang="scss">
// your styles

Use in External File

We can write our SCSS styles in separate file. After that we just need to import the file in component like:

import '../css/style.scss'

That’s it. Thanks for reading. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.

Hey, I'm Md Obydullah. I build open-source projects and write article on Laravel, Linux server, modern JavaScript and more on web development.