语言►nodejs►库►postcss

PostCSS中的postcss-preset-env

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/05/PostCSS%E4%B8%AD%E7%9A%84postcss-preset-env/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 示例
  4. 配置

正文

作用

postcss-preset-env 允许开发者使用最新的 CSS 语法而不用担心浏览器兼容性。postcss-preset-env 会将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法。

安装

1
2
3
#!/usr/bin/env bash

npm install --save-dev postcss-preset-env

示例

learn_postcss/postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: {
    'postcss-preset-env': {},
  },
};

源文件：

learn_postcss/index.css

1
2
3
4
5
6
7
8
:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  display: flex;
}

编译：

1
2
3
#!/usr/bin/env bash

npx postcss index.css --output index.compiled.css

输出：learn_postcss/index.compiled.css

1
2
3
4
5
6
7
8
9
:root {
  --mainColor: rgba(18, 52, 86, 0.47059);
}

body {
  color: rgba(18, 52, 86, 0.47059);
  color: var(--mainColor);
  display: flex;
}

配置

注意：在没有任何配置的情况下，postcss-preset-env 会开启 stage 2 阶段的特性并支持所有浏览器。

stage

此属性决定了哪些 CSS 特性需要被填充。

stage 共分为 5 个阶段，分别是：

  • stage-0 非官方草案
  • stage-1 编辑草案或早期工作草案
  • stage-2 工作草案
  • stage-3 候选版本
  • stage-4 推荐标准

示例：

1
2
3
4
5
6
7
module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0,
    },
  },
};

features

此属性决定了哪些特性应该被开启或者关闭。

browsers

postcss-preset-env 使用 browserslist 来配置目标环境。

autoprefixer

postcss-preset-env 集成了 autoprefixer。

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/05/PostCSS%E4%B8%AD%E7%9A%84postcss-preset-env/

本文对你有帮助？请支持我

支付宝
微信