组件库都在使用CSS变量了

CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。 （IE：啊这？)

如何解决 IE 关于 css var 的适配问题呢？

通过 webpack 的 postcss-loader + postcss-css-css-variable 编译生成固定的代码。

:root {
  --white: #fff;
  --black: #000;
}
a {
  border: 1px solid var(--white);
}
span {
  color: var(--black);
}
1
2
3
4
5
6
7
8
9
10

通过 webpack 的 postcss-loader + postcss-css-css-variable 编译，上述代码转变成。

a {
  border:1px solid #fff;
  border: 1px solid var(--white);
}
span {
  color: #000;
  color: var(--black);
}
1
2
3
4
5
6
7
8

这样一来在 IE 上面，样式就直接会使用上面设定好的，而不管下面的 var 变量了。

通常，element-plus 自定义主题，如果您的项目也使用了 SCSS，可以直接修改 Element Plus 的样式变量。 创建一个 element/index.scss 文件来合并你的变量和 element-plus 的变量。

import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
1
2
3
4
5
6
7

还可以通过 CSS 变量设置，现在 element-plus 中用 css 变量来重构了几乎所有组件的样式系统。

这意味着你可以动态地改变组件内的个别变量，以便更好地自定义组件样式，而不需要修改 SCSS 文件重新编译一次。

如果你只想自定义一个特定的组件，只需为某些组件单独添加内联样式。

<el-tag style="--el-tag-bg-color: red">Tag</el-tag>
1

如果您想要通过 js 控制 css 变量，可以这样做：

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')

// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)

// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')
1
2
3
4
5
6
7
8
9

如果你想要更优雅的方式，你可以引入 VueUse 使用 useCssVar 方法。

import { useCssVar } from '@vueuse/core'

const el = ref(null)
const color = useCssVar('--color', el)
1
2
3
4

VueUse：一个日益增长的 Vue 组合式函数集合。源代码本身就是一份不错的学习资料。