Discussions
Categories
- 197.1K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.7K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 555 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.3K SQL Developer
- 296.3K Development
- 17 Developer Projects
- 139 Programming Languages
- 293K Development Tools
- 110 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 158 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 466 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
Using Bundle with web component that has component based styles.

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;
}*/
Answers
-
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.