postcss中postcss-simple-vars的语法在编辑器中报错

Question

业务背景

• 在webstorm下利用vue-cli3.0框架,学习postcss
• 使用混合宏(插件是postcss-mixins)时需要传递参数
• 传递参数所用到的变量插件是postcss-simple-vars

遇到的麻烦

• postcss-simple-vars定义和使用变量的语法和scss一样都是用$

• 但是定义变量和引用变量时编辑器会报错

  • 定义变量时报: property name expected
  • 引用变量时报: a term expected

示例代码

尝试解决

• 在style标签里面添加lang='postcss'
• 在编辑器的css代码检查中没有对应的选项设置

问题

• 怎么让它别报错?

Answer 1

问题原因

• webstorm内置了一个postCss support的IDE插件
• 但是它只支持7个postcss插件,其中并不包含postcss-simple-vars
• 所以浏览器才会报错.

参考: https://blog.jetbrains.com/we...

那到底怎么让编辑器支持postcss的$语法呢?