Using Bundle with web component that has component based styles.

Nathan Zentner

I am commenting out the reference to the CSS files from within my loader.ts files. I have found that when building and bundling, they are not put into the bundle.js. Even If I am using the min directory, it always downloads the CSS files separately.

Will there ever be a point where it will be bundled within the minimized files?

In the individual CSS files, I do see the comment below, but I am not sure if this is working in the builds.

/* This file is where css selectors for the component go.

   There will be hard coded properties and properties controlled by variables, for example

   hrt-accomm-incident-timeoff .hrt-accomm-incident-timeoff-value-text {

   color: var(--hrt-accomm-incident-timeoff-value-text-color);

   display: inline-block;

   }*/

Duncan Mills-Oracle

CSS files are excluded from the bundling because of the way that CSS handles image references - e.g. if you have, for example, a background-image URL setting this needs to have a relative location to the location from which the CSS is loaded - all good - but if you then suck the CSS into a bundle the load root (if you will) will usually change and that will result in 404s for the images as the load locations are no longer correct relative to that new root.

This is just a restriction of the way that the r.js bundler handles CSS bundling and we are looking at alternate approaches to improve this area.

Now, if you don't have any image references in your CSS then you should be able to get away with including the CSS files in the bundling and you can tweak the r.js settings in the before_optimize hook to enable that.

Another alternative, as you are dealing with a pack of components, is to consolidate the individual component CSS files into a single shared CSS for the whole pack - using a resource component as the vehicle for that - The CSS will still need a extra GET request but at least only one for the whole pack.