How To Add SASS/SCSS Support to Vue Components

Jul 26, 2018 · by Tim Kamanin

If you want to add SASS/SCSS support to your Vue app, it has never been easier before!

You can do this in two steps:

1) Install sass and sass-loader. Run the following command in your project dir:

bash

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

2) Add lang="scss" attribute to style tag of your vue component:

html

<style lang="scss">
.parent {
    .look-ma-i-m-doing-sass {
       color: red;
    }
}
</style>

That's all. You're good to go!