鍍金池/ 問(wèn)答/HTML/ postcss中postcss-simple-vars的語(yǔ)法在編輯器中報(bào)錯(cuò)

postcss中postcss-simple-vars的語(yǔ)法在編輯器中報(bào)錯(cuò)

業(yè)務(wù)背景

  • 在webstorm下利用vue-cli3.0框架,學(xué)習(xí)postcss
  • 使用混合宏(插件是postcss-mixins)時(shí)需要傳遞參數(shù)
  • 傳遞參數(shù)所用到的變量插件是postcss-simple-vars

遇到的麻煩

  • postcss-simple-vars定義和使用變量的語(yǔ)法和scss一樣都是用$

  • 但是定義變量和引用變量時(shí)編輯器會(huì)報(bào)錯(cuò)

    • 定義變量時(shí)報(bào): property name expected
    • 引用變量時(shí)報(bào): a term expected

示例代碼

clipboard.png

嘗試解決

  • 在style標(biāo)簽里面添加lang='postcss'
  • 在編輯器的css代碼檢查中沒(méi)有對(duì)應(yīng)的選項(xiàng)設(shè)置

問(wèn)題

  • 怎么讓它別報(bào)錯(cuò)?
回答
編輯回答
舊螢火

問(wèn)題原因

  • webstorm內(nèi)置了一個(gè)postCss support的IDE插件
  • 但是它只支持7個(gè)postcss插件,其中并不包含postcss-simple-vars
  • 所以瀏覽器才會(huì)報(bào)錯(cuò).

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

那到底怎么讓編輯器支持postcss的$語(yǔ)法呢?

2017年1月15日 12:34