在前端开发中，我们经常需要对网站进行美化，其中颜色的运用是非常重要的一环。而有时候，我们需要兼容一些老旧浏览器，这就需要我们使用一些技巧来实现，比如 rgba 颜色值的 fallback。
本文将介绍一个 npm 包 postcss-color-rgba-fallback 的使用方法，它可以自动为您生成 rgba 颜色值的 fallback，并且支持自定义配置。
安装
在使用之前，我们需要先安装 postcss 和 postcss-color-rgba-fallback 这两个包。
npm install postcss postcss-color-rgba-fallback --save-dev
配置
接着，在项目根目录下创建 postcss.config.js 文件，并添加以下内容：
module.exports = {
plugins: [
require('postcss-color-rgba-fallback')({
// 配置项
})
]
}在上述代码中，我们引入了 postcss-color-rgba-fallback 并进行了初始化配置。接下来，让我们来看一下如何配置这个插件。
配置项
postcss-color-rgba-fallback 支持以下配置项：
exclude
类型：Array | Function | RegExp | string
默认值：null
排除某些文件或文件夹不进行处理，支持传入数组、函数、正则表达式和字符串四种类型的参数。例如：
// 排除 node_modules 和 dist 文件夹下的 CSS 文件
exclude: [/node_modules/, /dist/]
// 排除以 _ 开头的文件名
exclude: (file) => file.indexOf('_') === 0
// 排除 index.css 文件
exclude: 'index.css'replacers
类型：Array
默认值：[]
自定义替换规则，数组中每一项为一个对象，包含 test 和 replace 两个属性。例如：
// 将 #rrggbb 格式的颜色转成 rgba 格式
replacers: [
{
test: /#([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})/g,
replace: 'rgba($1, $2, $3, 1)'
}
]properties
类型：Array | Function | RegExp | string
默认值：[/color/, /background-color/]
指定需要进行处理的 CSS 属性，支持传入数组、函数、正则表达式和字符串四种类型的参数。例如：
// 只处理 color 属性 properties: ['color'] // 处理所有以 bg- 开头的属性 properties: (property) => /^bg-/.test(property) // 处理所有属性 properties: /.*/
fallback
类型：boolean | 'always' | 'never'
默认值：true
指定是否生成 fallback，支持三种取值：true（根据浏览器兼容性自动判断），false（不生成 fallback），always（始终生成 fallback）。
forceAlpha
类型：boolean
默认值：false
指定是否强制生成 alpha 值，即使原来的颜色值不包含 alpha 值也会自动添加一个值为 1 的 alpha 值。
示例
假设我们有以下 CSS 代码：
.foo {
color: rgba(255, 255, 255, 0.5);
background-color: #fff;
}使用 postcss-color-rgba-fallback 插件后，它会自动为我们生成以下代码：
.foo {
color: rgba(255, 255, 255, 0.5);
color: #ffffff; /* IE fallback */
background-color: #fff;
background-color: rgba(255, 255, 255, 1); /* IE fallback */
}这样，我们就可以兼容老旧浏览器，并且不需要手写 fallback
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47864