#npm包postcss-variables-rewrite使用教程
##前言
前端开发过程中，我们不可避免的要使用到JS和CSS等代码库，而这些库依赖的又是比较复杂的框架和工具链，如何将这些复杂的过程化简，是我们需要关注的重点。而本文要介绍的npm包postcss-variables-rewrite，正是为我们解决CSS中变量替换问题提供了非常好的解决方案。
##什么是postcss-variables-rewrite
postcss-variables-rewrite是一款非常好用的CSS变量重写npm包，可以将CSS样式表中的变量替换为一定数值或另一个变量。
##安装
使用npm包管理工具进行安装:
npm install --save-dev postcss postcss-variables-rewrite
##使用
###Step1. 安装依赖
安装好node和npm后，在终端中键入以下命令：
npm install --save-dev postcss postcss-variables-rewrite
###Step2. 创建postcss.config.js
在根目录下创建postcss.config.js 文件并添加以下内容：
-- -------------------- ---- -------
----- ----------------------- - ------------------------------------
-------------- - -
-------- -
-------------------------
---------- -
------------------ ---------
-
--
-
-以上的例子中hash值即 #007bff 可以替换为你想要的CSS变量。
###Step3. 启动
在 package.json 中添加以下代码和 npm 脚本：
"scripts": {
"build": "postcss input.css -o output.css"
},通过控制台运行：
npm run build
这样，在根目录下会生成一个新的output.css文件，其中所有--primary-color的值都被替换为 #007bff。
##示例
为了更好的理解，我们来看一个具体的实例。
-- -------------------- ---- ------- -- ---- -- ----- - ---------------- -------- --------------- -------- - -- ---- -- ------------ - ------ ------ ----------------- --------------------- ------- --- ----- -------------------- -
使用postcss-variables-rewrite将会输出：
.btn-primary {
color: white;
background-color: #007bff;
border: 1px solid #e6e6e6;
}##结语
postcss-variables-rewrite这个npm包提供了非常优秀的工具和方法解决了CSS中变量替换的问题，同时也为前端开发者提供了不错的参考方案。
本文在介绍postcss-variables-rewrite的基本功能和使用时，也为大家提供了一些简单的示例。大家在使用时，也可以通过阅读官方文档以了解更多。希望大家喜欢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf581e8991b448e6b3d