Inspection not recognizing scss in vue file
(I'm using PhpStorm to develop a Laravel app with Vue on the front end, using WebPack.)
In mycomponent.vue file, I have the following:
<style lang="scss" scoped>
.my-class {
.other-class { // the editor has a red squiggly line here
}
}
</style>
The application works, so I know everything is hooked up correctly.
However, I get inspection errors when I use non-css constructs and I don't get the correct indentation. How can I tell PhpStorm that I'm using scss here?
Please sign in to leave a comment.
Hi there,
Please state the exact IDE version that you use (Help | About)
Is that latest 2017.1 EAP build or older?
What Vue.js plugin version do you use?
PhpStorm 2016.3.2
Buildd #PS-163.10504.2, built on December 20, 2016
I don't see a plugin installed that mentions vue, although most of the vue syntax is supported.
I looked under "Browse repositories" for a vue plugin and installed vue.js version 1.1.0.
That did not help.
That must be some 3rd party plugin as the one made by JetBrains is not available for 2016.3.x.
Vue.js support is added in 2017.1 (currently in EAP stage) where you need to install that different (only one) Vue.js plugin. The latest version of this plugin should resolve the issue you are having.
You can try latest EAP build here: https://blog.jetbrains.com/phpstorm/2017/02/phpstorm-2017-1-eap-171-3566/
I upgraded and added the vue plugin. I still get the problem. I tried to upload a screen shot, but the PNG file wasn't accepted in this dialog.
Accordingly to these tickets it should work:
Try this suggestion perhaps: https://youtrack.jetbrains.com/issue/WEB-19082#comment=27-1944491
Yes! It works if I use this script tag:
Thanks so much for a great product!