Enable IntelliSense for Sass in .vue files in VS Code

Question

Is there a way to enable IntelliSense for Sass in .vue files without associating them with sass for it would break off another extensions relying on .vue file association?

Answer 1

To get sass or scss syntax highlighting you need to have the Vetur (octref.vetur) extension installed in VS Code. I have experienced issues with Vetur that the vue-language-server fails to start, which causes alot of issues with syntax highlighting. I have not found a fix for this except a re-install. Also make sure to run the latest version of VS Code.

In a .vue file, you also need to ensure you use the correct attributes

<style lang="sass">
    .my-class
        text-align: center
</style>

Or for scss

<style lang="scss">
    .my-class {
        text-align: center
    }
</style>