npm 包 postcss-hamster 使用教程

前言

postcss-hamster 是一个使用 PostCSS 处理 CSS 的插件，它可以实现自动添加 CSS3 动画前缀。在前端开发中，CSS3 动画越来越受到重视，然而为了兼容各种浏览器，需要添加大量的前缀。使用 postcss-hamster 插件，可以自动添加 CSS3 动画前缀，省去手动添加前缀的麻烦。

安装和使用

安装

使用 npm 安装 postcss-hamster：

npm install postcss-hamster --save-dev

使用

在项目中使用 postcss-hamster 需要先安装 PostCSS。

npm install postcss --save-dev

安装好 PostCSS 后，新建 postcss.config.js 文件，在文件中配置 postcss-hamster 插件。

module.exports = {
  plugins: [
    require('postcss-hamster')()
  ]
}

然后在 package.json 文件中添加 build 命令。

{
  "scripts": {
    "build": "postcss src/ -d dist/"
  }
}

在命令行使用 build 命令即可处理 CSS 文件，并自动添加 CSS3 动画前缀。

npm run build

示例代码

原始 CSS

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {transform: rotate(360deg);}
}

经过 postcss-hamster 处理的 CSS

-- -------------------- ---- -------
-------- -
  ------------------ ---- -- ------ ---------
          ---------- ---- -- ------ ---------
-
------------------ ---- -
  -- ------------------- ------------------------- ----------------
-
---------- ---- -
  -- ------------------- ------------------------- ----------------
-

总结

postcss-hamster 插件可以帮助前端开发人员自动添加 CSS3 动画前缀，简化代码编写过程。使用该插件需要先安装 PostCSS，然后在 postcss.config.js 文件中配置插件。最后在命令行中使用 build 命令即可处理 CSS 文件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1c81e8991b448d8c5d