语言►nodejs►库►postcss

PostCSS中的autoprefixer

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/04/PostCSS%E4%B8%AD%E7%9A%84autoprefixer/

摘要

本文主要讲述了：

  1. 作用
  2. 安装
  3. 示例

正文

作用

autoprefixer 用于解析 CSS 并根据目标环境给 CSS 添加浏览器引擎前缀。

注意：autoprefixer 只会添加浏览器引擎前缀，并不会添加 polyfill。若目标环境不支持对应的样式，则 autoprefixer 只会原样输出。

安装

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

npm install --save-dev autoprefixer

示例

learn_postcss/postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

learn_postcss/.browserslistrc

1
2
3
ie 9
firefox 4
chrome 35

源文件：

learn_postcss/index.css

1
2
3
.foo {
  transform: rotate(30deg);
}

编译：

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
.foo {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/04/PostCSS%E4%B8%AD%E7%9A%84autoprefixer/

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

支付宝
微信