Styling languages

在 ChatGPT 中打开

您的样式以 CSS 的形式到达页面，但您不必将其写为 CSS。 webforJ 加载您编写的样式表，或从 Sass 或 Less 等预处理器编译出样式表，或从 Tailwind 生成样式表，结果是无论来自何处，都以相同的方式样式化您的视图。本节其余部分涵盖的 DWC 令牌、CSS 自定义属性 和 阴影部分 可以在其中任何一个应用。

普通 CSS

您编写的样式表无需构建。将其附加到组件或应用中，使用 @StyleSheet。当您已经运行 前端打包器 时，您可以通过 @BundleEntry 将 .css 文件绑定到一个类，这样就将其作为该视图的样式加载。

Sass 和 Less

要使用变量、嵌套和函数在 Sass 或 Less 中编写样式，请编写源文件，并让 前端打包器 将其编译为 CSS。编译器是一个 扩展，当存在其类型的源时，会自行开启，因此编写 .scss、.sass 或 .less 文件是它所需的唯一信号。将源绑定到类的方式与绑定样式表相同：

StyledView.java

@Route("/styled")
@BundleEntry("styles/view.scss")
public class StyledView extends Composite<FlexLayout> {
  // 构建视图
}

该扩展将 view.scss 编译为 CSS，并为视图加载它。有关文件布局、加载路径和每个文件接受的选项，请参见 SCSS 和 Sass 和 Less。

Tailwind

Tailwind 根据您的视图使用的实用类名称生成样式表，而不是根据您编写的文件生成样式表。启用扩展，然后以类名添加实用工具，而无需导入内容。 webforJ 省略了 Tailwind 的基础重置，以避免与您组件已有的样式冲突，实用工具样式应用于您放置它的元素，而不是组件内部。有关它如何生成和作用于其样式表，以及实用类适用和不适用的位置，请参见 Tailwind 扩展。

另一种语言

每种语言的编译器都是一个打包器扩展，并且该模型是开放的。要在 webforJ 不提供编译器的语言中编写样式，请编写一个小扩展来贡献该编译器，使用与 Sass 和 Less 相同的约定。有关详细信息，请参见 编写自己的扩展。