Clever Geek Handbook

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

?

+5


source to share


2 answers


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>
+1


source


  1. You need to install the IntelliSense extension for CSS class names in HTML ( https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion )

  2. 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

0


source






More articles:


All Articles