PostCSS 工具的使用

PostCSS 与 CSS 的关系，就相当于 Babel 与 JavaScript。

PostCSS 可以将 CSS 解析为抽象语法树 (AST)，并提供了 API 允许分析和转换 CSS 文件的内容。

1. 简单理解PostCSS

PostCSS就是一个使用JavaScript插件来转换CSS的工具。
提供了庞大的插件库来提升你的CSS编写体验。
你可以选择一个你需要的插件或者自己写一个来使用。
总结：这个一个用来运行插件的CSS处理平台。

简单来说，你正常地写完了一句CSS，然后PostCSS的插件就会自动分析你代码并转换成你想要的格式。

2. PostCSS参考资料

PostCSS 中文官网

PostCSS Github中文文档

3. 如何使用PostCSS

安装 Webpack 相关依赖：

# 安装Webpack基础配置
yarn add webpack webpack-cli css-loader style-loader mini-css-extract-plugin --dev

# 安装PostCSS相关依赖
yarn add postcss postcss-loader --dev

在 webpack.config.js 文件中，为 css 文件启用 postcss-loader：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'postcss-loader',
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css',
    })
  ],
}

在 postcss.config.js 文件中配置 PostCSS 的插件使用：

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

4. PostCSS常用插件

4.1 autoprefixer

利用从 Can I Use 网站获取的数据为 CSS 规则自动给属性加需要兼容浏览器的前缀。

Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。

安装依赖：

#
yarn add autoprefixer --dev

postcss.config.js：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Autoprefixer 使用 browserslist 作为参考值来决定需要为哪些属性添加前缀，因此我们需要提供明确的 browserslist 以达到我们的目的。

最好的方式是在项目的根目录下提供 .browserslistrc 配置文件，或者在 package.json 文件中添加 browserslist 配置。

.browserslistrc

> 1%
last 2 versions
not dead

package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Autoprefixer 转换效果

/* 原样式代码 */
:fullscreen { }

/* 转换后的样式代码 */
:-webkit-full-screen { }
:-ms-fullscreen { }
:fullscreen { }

4.2 postcss-pxtorem

该插件用来将css样式中的px单位转换为rem单位，用来适配移动端的自适应布局。

安装依赖：

yarn add postcss-pxtorem --dev

postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      // 根节点的字体大小（设计稿宽度为750px，页面100%宽度为10rem）
      // 这里无法设置成7.5，是因为某些浏览器对字体大小的最小值有规定，一旦低于某个值将设置无效
      rootValue: 75,
      // 单位精度
      unitPrecision: 5,
      // 可以从px更换为rem的属性列表
      propList: ['*'],
      // 需要转化的最小的pixel值，低于该值的px单位不做转换
      minPixelValue: 2,
      // 媒体查询中不生效
      mediaQuery: false,
    }),
  ]
}

需要动态设置页面根节点的字体大小：

const designWidth = 750 // 设计稿宽度
const baseValue = designWidth / 10 // 将页面拆分为10rem，跟 postcss.config.js 中的 rootValue 的值保持一致
function setRem() {
  // 页面宽度相对于设计稿的缩放比例
  const scale = document.documentElement.clientWidth / designWidth
  // 设置页面根节点的字体大小，最高为1倍缩放比例，即设计稿为750
  document.documentElement.style.fontSize = (baseValue * Math.min(scale, 1)) + 'px'
}
window.onresize = function () {
  setRem()
}
setRem()

转换效果：

/* 原样式代码 */
.text-box {
  width: 375px;
  font-size: 28px;
  line-height: 40px;
  border: 1px solid #ddd; /*1px低于minPixelValue的设定将不会被转换*/
  border-width: 2PX; /*使用大写字母的单位将会被忽略，但依旧被浏览器接受使用*/
}

/* 转换后的样式代码 */
.text-box {
  width: 5rem;
  font-size: 0.37333rem;
  line-height: 0.53333rem;
  border: 1px solid #ddd; /*1px低于minPixelValue的设定将不会被转换*/
  border-width: 2PX; /*使用大写字母的单位将会被忽略，但依旧被浏览器接受使用*/
}

4.3 postcss-pxtorpx-pro

该插件是从 pxtorem 基础上修改而来，转换px单位为rpx，并允许指定任意单位及其转换函数，支持指定黑名单prop。

安装依赖

yarn add postcss-pxtorpx-pro --dev

postcss.config.js

module.exports = {
  plugins: [
    require('postcss-pxtorpx-pro')({
      // 转换后的单位
      unit: 'rpx',
      // 单位精度
      unitPrecision: 5,
      // 需要转化的最小的pixel值，低于该值的px单位不做转换
      minPixelValue: 2,
      // 转化函数（默认设计稿按照750宽，1倍图的输出）
      transform: (x) => 1*x,
    }),
  ]
}