Custom Templates
Any styles that you define in this Library are consumed in two ways: as a CSS module or as a CSS bundle.

CSS Bundles

A CSS bundle is a file that contains all the styles needed for a website (typically made available by content delivery networks as a single file such as bootstrap.min.css). This bundle can be easily loaded into any HTML page, but applications typically need styles from many different sources and ultimately it reaches a size that makes loading it in all pages no longer desirable.
Another issue of CSS bundles is that as more styles are included, class names and selectors may be used in two different places. This can lead to conflicts that require more CSS to adjust, and with no way to ensure it doesn't occur again.

CSS Modules

CSS Modules provide a way to isolate all styles while still allowing you to reference "global" class names in your dependencies.
To achieve such isolation, all selectors are considered "local" and have their class and id names replaced by a unique identifier and you have to import such names into your component implementation to be interpolated into your HTML.
If you use CSS modules, the file needs to be named: MyComponentType.module.scss and imported as import styles from '@c3/ui/MyComponentType.module.scss';.
Otherwise, non-modular CSS files need to be named: MyComponentType.scss and imported as import '@c3/ui/MyComponentType.scss';
Export as PDF
Copy link