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.