如何将我自己的 CSS 添加到具有现有线框主题的 Sitecore SXA 自定义组件?

How I can add my own CSS to the Sitecore SXA custom component with the existing wireframe theme?

我正在尝试创建一个新的自定义组件,它可以 added/patched 使用 Sitecore SXA 组件,并且应该能够与 Sitecroe sxa 的现有主题(主要是 Wireframe 主题)融为一体。我已经根据我们的自定义要求创建了组件,但我无法找到将我的自定义 CSS 和 js 文件与 Sitecore SXA 线框主题集成的方式。

我尝试通过将 CSS 放在我的视图中并使用样式标签来使用它,但它不起作用。

我应该能够将我的自定义 css 和 js 文件与 sxa 现有主题集成,以便我的组件可以用作 SXA 组件的子部分。

您有两个选项来扩展现有的线框主题——这两个选项都不应修改现有的主题。一个好的一般经验法则是不要修改平台附带的 files/items。这些选项是:

基于 Wireframe 主题创建新的自定义主题。

您可以使用站点的上下文菜单并转到 Scripts > New Site Theme 创建新主题。这将为您提供一个向导来为您的站点创建一个新主题。然后,您可以将 Wireframe 主题的子项复制到新的自定义主题中,并根据需要将适当的文件上传到媒体库中的主题文件夹中来更新 CSS/JS。 Select 您的新主题作为您网站的主题。

Sitecore 文档参考:https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/create-a-custom-theme.html

扩展现有的线框主题。

SXA 允许您创建主题扩展以上传您自己的样式和脚本。要创建主题扩展,请转到 Media Library 中的 Extension Themes 部分并使用上下文菜单插入新的 Extension Theme。然后,您可以将自定义 CSS 和 JS 文件添加到它为您提供的文件夹结构中的主题扩展。然后,您需要通过转到 /sitecore/System/Settings/Feature/Experience Accelerator/Page Content/Page Content Site SetupInsert > Attach Theme Extension 将主题扩展附加到 Wireframe 主题。这将为您提供一个项目,供您映射线框主题(select 它作为 Theme that is extended)和您的主题扩展(select 它在 Extension Themes 下)。现在,这会将您的主题扩展文件添加到线框主题中,并且您的主题扩展文件将被视为主题的一部分。

Sitecore 文档参考:https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/extend-a-theme.html