A styles bundle is a generated JavaScript bundle that applies an application's global CSS stylesheets in the browser. It uses browser APIs to distribute stylesheet contents as JavaScript, keeping deployment self-contained rather than requiring separate CSS assets. section 9.3.2
Configure the bundle through the Angular workspace:
- List stylesheet paths in the styles setting of angular.json. section 9.3.2
- Inspect the configured paths with ng config "projects.example.architect.build.options.styles". section 9.3.2
- Include application styles such as src/styles.css and package styles such as Angular Material or Bootstrap CSS. section 9.3.2
Adding Bootstrap
Install Bootstrap with npm install bootstrap@5.2.3, then add node_modules/bootstrap/dist/css/bootstrap.min.css to the styles array. Classes such as bg-primary, text-white, and text-center can then style application markup. section 9.3.2
Table 9.7. The bundles produced by the Angular build process
|
Name
|
Description
|
|
main.js
|
This file contains the compiled output produced from the
src/app folder.
|
|
polyfills.js
|
This file contains JavaScript polyfills required for features used by the application not supported by the target browsers.
|
|
runtime.js
|
This file contains the code that loads the other modules.
|
|
styles.js
|
This file contains JavaScript code that adds the application’s global CSS stylesheets.
|
|
vendor.js
|
This file contains the third-party packages the application depends on, including the Angular packages.
|
Use the bundle table to distinguish styles.js from main.js, polyfills.js, runtime.js, and vendor.js. section 9.3.2
