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

Question

I am trying to create a new custom component which can be added/patched with the Sitecore SXA compoenents and should be able to gel-up with the existing themes of Sitecroe sxa majorly with Wireframe theme. I have created the component as per our custom requirements but I am unable to find the way that how my custom CSS and js files will be integrated with the Sitecore SXA wireframe theme.

I have tried using it by putting the CSS in my view with style tags but it is not working.

I should be able to integrate my custom css and js files with the sxa existing themes so that my component can be used as a subpart of SXA component.

Answer 1

You have two options to extend the existing Wireframe theme - neither of which should modify the existing theme. A good general rule of thumb is to not modify the files/items that the platform ships with. These options are:

Create a new custom theme based on the Wireframe theme.

You can create a new theme by using the context menu of your site and going to Scripts > New Site Theme. This will give you a wizard to create a new theme for your site. You can then copy the children of the Wireframe theme into your new custom theme and update CSS/JS as you wish by uploading the appropriate files into the theme's folder in the media library. Select your new theme as the theme for your site.

Sitecore documentation reference: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/create-a-custom-theme.html

Extend the existing Wireframe theme.

SXA allows you to create a theme extension to upload your own styles and scripts. To create a theme extension, go to the Extension Themes section in the Media Library and use the context menu to insert a new Extension Theme. You can then add your custom CSS and JS files to the theme extension in the folder structure it provides for you. You then need to attach the theme extension to the Wireframe theme by going to /sitecore/System/Settings/Feature/Experience Accelerator/Page Content/Page Content Site Setup and going to Insert > Attach Theme Extension. This will give you an item for you to map the Wireframe theme (select it as Theme that is extended) and your theme extension (select it under Extension Themes). This will now add your theme extension files to the Wireframe theme and your theme extension files will be considered part of the theme.

Sitecore documentation reference: https://doc.sitecore.com/developers/sxa/17/sitecore-experience-accelerator/en/extend-a-theme.html