CSS specific to a widget is contained in the /widget/<widget-type>/less directory:

<extension-name> : the root folder of your extension
    ext.json
    widget/
        <widget-type>/
            widget.json
            less/
                widget.less

These files are always named widget.less and any CSS can be added here. Styling across the Storefront is built using Less. A Less file, like widget.less, can define style using the Less language or native CSS. Less files are compiled to make one CSS file.

For Storefront, there are some bootstrap Less files, common Less files, and widget-specific Less files, which are compiled together. The overall styling of the Storefront is known as a Theme. Oracle Commerce Cloud Service provides tools to manage Themes and allows merchants to change the Storefront styling.

It is important that any style overridden within a widget Less file only applies to that widget, and does not change the style across the Storefront. One way to achieve this is to format the widget’s styles using the Less nested format, for example:

.myWidgetClass {
  .myClass {
    color: red;
  }

  .otherClass {
    color: blue;
  }
}

In this case myWidgetClass is a class applied at the top-level of the widget’s template, myClass is a class created for this widget and otherClass is a class that already exists but the styles need to be modified slightly for this widget.

When this Less file is compiled, it produces CSS in the format shown below, which ensures the changes to the styles for otherClass are only applied within this widget:

.myWidgetClass .myClass {
  color: red;
}

.myWidgetClass .otherClass {
  color: blue;
}

Note: If you design a custom style as part of an extension, the Less style may not be compiled immediately after uploading the extension package. If this happens, open the widget’s style in the code editor (on the Design tab), make a superficial edit, and then resave. This process forces compilation of the style.