.vue文件中 sass 的使用识别问题

Question

如图：webpack中虽然可以编译，但是在 webstorm 中报语法错误，强迫症的我无法接受，请问怎么解决呢？

Answer 1

你可以在style标签里加上

rel="stylesheet/scss"

Answer 2

是不是语法问题？因为你写的似乎是scss语句，换这样试试

<style lang="scss">
......
</style>

Answer 3

在webstorm中设置一下就可以识别了，具体为
settings>Editor>Language Injections
里面有5个内建的，可以参考一下
增加一项，选择第3个xml tag injection
name为这个配置名字 随便起
Language选项中id请选择你想要用的 如scss
XML Tag选项中Local name为style(匹配style标签)
Namespace好像不选也没事(反正我照着css那个配置选了xhtml那个)
Advanced选项中XPath condition中写@lang='scss'(和上面的联合匹配style中lang属性为scss的内容区域)

（这种配置在.vue文件中有效.html中强制匹配style标签为css 不知道怎么改）

Answer 4

我写在.vue里运行就会报错，写在scss里然后require就可以，你在webpack是怎么配置的呢？

还有你这个问题解决了吗？

Answer 5

上面大家给的答案都不可以，?！

Answer 6

WebStrom 2016.1.1 以上版本可以通过设置style标签的类型来阻止语法错误， 为此特意升级了WebStrom

Answer 7

我是这么做的具体如下：
1、执行npm i sass-loader node-sass -D
2、

3、vue文件中style 加 lang="scss" rel="stylesheet/scss"

Answer 8

最后咋么解决的，，好奇。