在浏览器中使用 bootstrap/clay css 变量进行 Liferay 7.4 主题开发

Question

在之前的liferay版本中，当开发自定义主题时，我曾经查找所有涉及的

var(--XYZ)

css变量并在

_clay_variables.scss

中覆盖它们（例如$btn-border-radius等）。

在 liferay 7.4 中，这仍然有效并且可以工作，但是我在浏览器检查器中没有看到 css var(--) 来知道可以修改和覆盖哪些内容。

在构建部署的 CSS 时，这些变量似乎被删除了。是否有一种配置可以（本地）开发自定义主题，并且仍然可以在检查时看到可能的变量？

使用

classic-theme

这仍然有效 - 提供的 css 文件充满了 var(--) 变量。

Answer 1

在 Liferay 7.4 中，主题开发和 CSS 定制的方法已经发展，但仍然有一些方法可以有效地使用 CSS 变量。以下是更改的说明和一些建议：

Liferay 7.4 主题开发的变化

在 Liferay 7.4 中，CSS 变量 (var(--XYZ)) 确实在构建过程中进行了处理和优化，这就是为什么在开发自定义主题时您在浏览器检查器中看不到它们。此优化旨在提高性能，但它可能使主题开发更具挑战性。

在 Liferay 7.4 中使用 CSS 变量

尽管有这些变化，Liferay 7.4 中仍然有一些方法可以使用 CSS 变量：

1. 使用经典主题：正如您所注意到的，经典主题仍然保留所提供的 CSS 文件中的 CSS 变量。这可以作为识别可用变量的有用参考。

2. StyleBook 功能：Liferay 7.4 引入了 StyleBook 功能，它提供了一个使用 CSS 自定义属性与 Clay 最多自定义变量的层。这允许客户端样式定制。

3. 自定义主题开发：开发自定义主题时，您仍然可以通过导入正确的文件并在主题中修改它们来使用CSS自定义属性。

不幸的是，在本地开发过程中，没有直接配置可以使 CSS 变量在浏览器检查器中可见。但是，您可以设置开发环境以使用样书功能和前端令牌，以获得类似的开发体验。

请记住，虽然检查器中 CSS 变量的直接可见性发生了变化，但随着样书的引入和改进的前端令牌支持，Liferay 7.4 中主题定制的底层机制变得更加强大。