postcss踩坑问题集合

Question

业务背景

• 从昨天18/9/12开始学postcss
• 直到现在还没完全用顺手
• 记录一下遇到的问题,以后慢慢处理
• 懒得一个一个提问了

坑一

【已解决】webstorm不支持postcss-simple-vars插件的$语法

• 示例代码如下

$gray: #6C6C6C;
$gray-dark: #2A2A2A;
$gray-back: #F6F6F6;

• 效果图如下

• 解决

  • 不用这个插件,用'postcss-custom-properties,只是后者这个语法复杂一点,不过定义一个live template`后也还好

坑二

【已解决】另外一个页面定义的postcss-css-variables变量,无法通过postcss-import导入使用

• base.css文件

:root {
  --gray-dark: #333333;
  --green: #2B9A34;
}

• index.css文件

@import "./base.css"
color: var(--gray-dark); // 不生效

---

• 解决

  • 用'postcss-custom-properties`

坑三

【已解决】无法在<style lang="scss">标签下,使用postcss-import的@import语法

<style lang="scss">
  @import '../assert/base.css' // 编译时会报错
</style>

• 解决

  • 去掉lang属性

坑四

【已解决】postcss-nesting嵌套时,每个子类都必须在前面添加&符号

• 示例代码如下

.container {
 & .left {
   color: red;
 }
 & .right {
  color: black;
  .bold {  // 如果不加&,.bold不会编译成.right的子元素
    font-size: 110%;
  }
 }
}

• 解决

  • 不用这个插件,换成postcss-nested插件

坑五

【已解决】postcss-mixins混合时,前面定义的宏在后面无法使用

• 示例代码如下

@define-mixin flex {
  display: flex;
}
@define-mixin flex-row {
  @mixin flex; // 这里会报错
  flex-direction: row;
}

• 解决

  • 去掉style标签上的lang属性即可

坑六

webstorm无法识别 postcss-import 配置的根路径

• .postcsssrc.js 配置如下

module.exports = {
  "plugins": {
    "postcss-import": {
      path: ["./src/assets/css"]
    },
    ......

• 页面js代码如下

<style scoped>
  @import "base.pcss";
  .container {
  ......

• webstorm报错内容如下