Sometimes we’d like to split third-party external styles or legacy styles into a separate CSS bundle on building our angular application. This can be done quite easily. Keep reading to know more.
Including External Styles
As commonly known, we can include any external styles in our angular application by adding them to the styles array in our angular.json file:
This would generate a single CSS file after the ng-cli build goes through (ng build) :
In Production build, angular generates a random hash in for browser cache busting purposes. If something changes in our bundle, a new hash is generated and added to the file name, by doing so we invalidate a previously cached file and force the browser to retrieve the new file from our server.
Quick Tip: If you want to extract CSS in
ng-serve, as well as ng build, you can edit your
angular.json file and add
"extractCss": true to
architect -> build -> options . We could previously pass the
--extract-css flag to our ng build command but unfortunately, this is not supported after Angular 6+
Using Object Notation
We can also pass config objects to the style array using the object notation defined here to include external styles in our angular application:
and this will output 3 separate CSS files:
We learnt how we can easily split our external into separate named bundles. This can be useful for tracking bundle stats.
We learnt how we can easily split our external styles in angular into separate named bundles. This can be useful for tracking bundle stats.