Lint SCSS/SASS in single file components Vue.js in PhpStorm

Question

I'm using Vue.js with a single file component approach. My IDE is PhpStorm and I would like to find a way so that the SCSS contained in the <style></style> inside a .vue file is well recognized.

Currently it looks like the picture I attached -- I don't know whether it is a plugin to install or a setting to change in PhpStorm.

<template>
    ...
</template>

<script>

    export default {
        name: 'Tree',
        components: {

        },

    }
</script>
<style lang="scss">
   ... My SASS / SCSS / CSS
</style>

Answer 1

I just found the answer myself :

You need to add rel="stylesheet/scss" so it looks like

<style lang="sass" rel="stylesheet/scss"></style>

OR

 <style lang="scss" rel="stylesheet/scss"></style>