How to Use SCSS in Vue.js CLI Project
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
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:
That’s it. Thanks for reading. ?
<script> import '../css/style.scss' // </script>
Preview may take a few seconds to load.
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Bold **double asterisks**
Three back ticks and then enter your code blocks here.
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
> type a greater than sign and start typing your quote.
You can add links by adding text inside of  and the link inside of (), like so:
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of , and the image URL inside of (), like so:
To add a divider you can add three dashes or three asterisks:
--- or ***