语言►nodejs►库►postcss

什么是PostCSS

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/01/%E4%BB%80%E4%B9%88%E6%98%AFPostCSS/

摘要

本文主要讲述了：

  1. 什么是 PostCSS
  2. 安装
  3. 示例

正文

什么是 PostCSS

PostCSS 是一个使用 JavaScript 转换 CSS 的工具。

安装

局部安装

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

npm install --save-dev postcss-cli

示例

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;
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/11/01/%E4%BB%80%E4%B9%88%E6%98%AFPostCSS/

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

支付宝
微信