Enable IntelliSense for Sass in .vue files in VS Code
Is there a way to enable IntelliSense for Sass on files .vue
without linking them to sass
, because it would break other extensions that rely on file associations .vue
?
To get sass or scss syntax highlighting you need to install the Vetur extension (octref.vetur) in VS Code. I'm having issues with Vetur where the vue-language server won't start, causing a lot of syntax highlighting issues. I haven't found a fix for this other than reinstalling it. Also make sure you are using the latest version of VS Code.
In the .vue file you also need to make sure you are using the correct attributes
<style lang="sass">
.my-class
text-align: center
</style>
Or for scss
<style lang="scss">
.my-class {
text-align: center
}
</style>
-
You need to install the IntelliSense extension for CSS class names in HTML ( https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion )
-
In vs code go to Settings (Ctrl +,) -> Extensions -> IntelliSense for CSS class names in HTML and change the Include Glob Template box to this
**/*.{css,htm, vue}
It will show you the CSS properties