How to Use SCSS in Vue.js CLI Project

Published on July 2, 2020 26 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

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
</style>

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:

<script>
import '../css/style.scss'

//
</script>
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.
Author

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

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *