关于css:vue2中使用unocss在ie11-不能正常显示unocss的颜色设置

前景

ie11 不能失常显示 unocss 的色彩设置：“–un-text-opacity: 1 !important; color: rgba(213,147,197,var(–un-text-opacity));”

IE11 目前是无奈反对 CSS 变量（自定义属性）和 rgba 中应用的 var() 函数。

为了在 IE11 中应用 UnoCSS，你须要执行额定的步骤来转换这些古代 CSS 个性为 IE11 能够了解的款式。

思路

解决方案方法，能够应用 PostCSS 插件，postcss-custom-properties 和 postcss-color-function，来解决这些不兼容性。

步骤

1. 装置须要的 PostCSS 插件：
   npm install postcss-custom-properties postcss-color-function --save-dev
2. 更新 PostCSS 配置：
   如果你应用的是 postcss.config.js，则能够如下配置：

module.exports = {
  plugins: [require('postcss-custom-properties')(),
    require('postcss-color-function')(),
    // ... 其余 PostCSS 插件
  ],
};

如果应用 Vue CLI 并在 vue.config.js 中配置 PostCSS，也能够在那里增加这些插件。

3. 从新构建我的项目
   从新构建我的项目。这将通过上述 PostCSS 插件解决你的 CSS，将古代的 CSS 个性转换为 IE11 能够了解的款式。

而后 UnoCSS 生成的色彩应该可能在 IE11 中失常显示。