postcss 单独不转换_postcss踩坑问题集合

业务背景

从昨天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`

坑三

【已解决】无法在

@import '../assert/base.css' // 编译时会报错

解决

去掉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代码如下

@import "base.pcss";

.container {

......

webstorm报错内容如下