vite-plugin-replace-color
简介
- 替换css文件中的颜色或者自定替换css属性的vite插件;搭配 css变量可实现动态切换主题色
安装
node version: >=16.0.0
vite version: >=3.0.0
npm i vite-plugin-replace-color -D
yarn add vite-plugin-replace-color -D
pnpm install vite-plugin-replace-color -D
使用
import replaceColorPlugin from 'vite-plugin-replace-color'
export default () => {
return {
plugins: [
replaceColorPlugin({
colorVariables: {
"#fff": { hex: "var(--c5-white)", rgb: "var(--c5-white-rgb)" },
"#2563f4": { hex: "var(--c5-color)", rgb: "var(--c5-rgb)" },
"#409eff": "var(--c5-color)",
},
styleId: "_VITE_REPLACE_COLOR_",
includes: ["src/**/App.vue*"],
exclude: ["node_modules/**"],
ignoreMark: "ignore color"
}),
],
}
}
示例
.color {
color: #2563f4;
background-color: rgb(#2563f4, 0.4); // 有透明度 会从 rgb 属性中去匹配
box-shadow: 0 0 1px rgb(37 99 244);
border-color: #2563f466; // 8位带颜色的 也会从 rgb 属性中去匹配
outline-color: #2563f4; // 结尾用注释写上 ignoreMark 时 会跳过此次处理
}
.color {
color: var(--c5-color);
background-color: rgb(var(--c5-rgb)/0.4);
border-color: rgb(var(--c5-rgb)/0.4);
box-shadow: 0 0 1px var(--c5-color);
outline-color: #2563f4;
}
参数说明
参数 | 类型 | 默认值/参数 | 必填 | 说明 |
---|
colorVariables | Record<string, string | { hex?: string; rgb?: string }> | - | 是 | 声明替换的颜色 |
styleId | string | _VITE_REPLACE_COLOR_ | 否 | 注入自定义css 内容 时 style标签名 |
customerReplaceVariable | (decl) => string | decl(https://postcss.org/api/#declaration) | 否 | 自定义替换css(返回''则删除该条属性) |
includes | Array<string|RegExp>|string|RegExp | - | 否 | 匹配文件规则 |
exclude | Array<string|RegExp>|string|RegExp | - | 否 | 忽略文件规则 |
ignoreMark | string | ignore color | 否 | 忽略标识 |
辅助功能
- injectStyle 创建style标签 写入一些自定义css 到页面中 内容为空则删除 style标签
import { injectStyle } from "vite-plugin-replace-color/es/client";
injectStyle(`:root { --c5-color: #2563F4; --c5-rgb: 37 99 244;}`)