CSS Configurations
How to customize the way CSS works
Source ↗️ Report Issue ↗️To reduce your CSS bundle size and help you ship your own styles along with the necessary styles for the components, style includes can be configured in the configuration object of the setup
mixin. It accepts the following options:
Property | Default value | Purpose |
---|---|---|
includeResets | true | Include reset styles for native HTML elements, such as code , pre , or ul . Set to false if you want to use your own CSS resets. |
includeUtilities | true | Adds utility classes for CSS. Read more about the available utility classes here. |
includeTooltip | true | Adds global styles for tooltips. |
includeScrollbarStyles | true | Adds global styles for scrollbars. |
webcore.config.scss
While the setup
mixin can be used once to define generic styles that will be bundled in your CSS, the webcore.config.scss
file can be used to define individual component styles. To configure how Webcore component are displayed, you can define the following maps in your webcore.config.scss
file:
You can also override border-radius
values using the following CSS variables:
If you leave your
webcore.config.scss
file empty, the above rules will be applied as default. Overriding Component Styles
Default component styles can also be changed by overriding the following CSS variables:
Request improvement for this page