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
</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. 🙂

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 *