为 1.0 版自定义 Clarity 主题答案

【问题标题】：Customizing the Clarity theme for version 1.0为 1.0 版自定义 Clarity 主题
【发布时间】：2018-11-18 06:03:13
【问题描述】：

在 1.0 测试版之前，我自定义了清晰度主题，它看起来很完美。但是，当我升级到当前的 beta 版本 1.0 时，我注意到一些数据网格组件部分，如单元格标题和分页控件有点偏离。下面展示了我如何使用清晰的内置 SCSS 文件为明暗模式生成 SCSS 主题。下面的 SCSS 导入没有任何自定义主题，因此它应该生成清晰的内置主题。我的目标是有一个预先生成的 css，我可以在切换主题时动态加载它。同样，这里的问题是数据网格页脚和单元格标题已关闭。我有什么遗漏吗？

光：

@import "node_modules/@clr/ui/src/utils/bootstrap/bootstrap";    
@import 'node_modules/@clr/ui/src/utils/dependencies.clarity';
@import 'node_modules/@clr/ui/src/utils/components.clarity';

黑暗：

@import "node_modules/@clr/ui/src/utils/bootstrap/bootstrap";    
@import 'node_modules/@clr/ui/src/dark-theme';

【问题讨论】：

标签： vmware-clarity

【解决方案1】：

我想我刚刚解决了这个问题。我需要使用 postcss cli 为生成的 css 添加前缀。现在，它看起来很整洁。

【讨论】：

出于好奇，您在测试什么浏览器？
我主要在最新的 Chrome 中测试它，但我在 Edge 和 Mozilla 中也遇到了这个问题。然后当我为编译的 CSS 自动添加前缀时，它就被修复了。不过，我仍然必须尝试缩小版本。顺便说一句，我在一个 Angular 库项目中编译了它（在 Angular 工作区的项目文件夹中）。
哦，是的，我们确实使用 postcss 来设置所有这些前缀，但如果您尝试自己构建这些前缀，这些前缀将不会自动处理。