Referencing the guidelines provided in this resource for theming:
In order to create CSS rules specific to an application view, you need to generate an .scss file within the same directory and with a matching base name as the view. For instance, if you want to style the view App.view.main.Main, you can add Main.scss to that folder:
As per this guidance, I have two files in the same folder: Form.js and Form.scss
If I define a custom class in Form.scss and apply it in Form.js, the styling works perfectly. Here is an example:
.toolbar-red {
background:green;
}
However, any attempts to reference an internal Extjs class do not yield the expected results. For instance, the following code does not produce the desired outcome:
.bold-grid .x-column-header-text-inner {
font-weight: bold;
}
Although I am aware that the mentioned style functions correctly when added to my /theme/sass/src/Application.scss, I prefer segregating my custom styles into individual files like Form.scss. Despite using Sencha Architect, adding these styles directly to the theme sass file proves effective. Nevertheless, my goal remains to keep them separate in Form.scss. Unfortunately, referencing an internal class seems to hinder this approach.