By default everything is bundled in:
- inline.bundle.js
- polyfills.bundle.js
- styles.bundle.js
- vendor.bundle.js
- main.bundle.js
Is it possible to have separate CSS file?
-
separation based upon what kind of criteria..?n00dl3– n00dl32017-02-21 15:05:36 +00:00Commented Feb 21, 2017 at 15:05
-
6CSS criteria :)Stepan Suvorov– Stepan Suvorov2017-02-21 15:14:34 +00:00Commented Feb 21, 2017 at 15:14
-
oh, you mean load the css files at runtime based on styleURLs ? (that sounds like a preformance killer)n00dl3– n00dl32017-02-21 15:16:34 +00:00Commented Feb 21, 2017 at 15:16
-
no, just compile all css assets into one file, CSS file, not JS file.Stepan Suvorov– Stepan Suvorov2017-02-21 15:42:13 +00:00Commented Feb 21, 2017 at 15:42
-
4"against the angular component pattern" - that's true. Unfortunately I have to do it. To make possible to load different style-themesStepan Suvorov– Stepan Suvorov2017-02-21 15:45:55 +00:00Commented Feb 21, 2017 at 15:45
|
Show 3 more comments
4 Answers
Yes! In your angular.json file the common thing to do is
"styles": [
"styles/bootstrap.scss",
"styles/app.scss",
"styles/whatever-else.scss"
]
and that all gets combined into a dist/styles.5d56937b24df63b1d01d.css file or whatever it decides to name it.
INSTEAD you can use the object notation defined here
"styles": [
{
"input": "styles/bootstrap.scss",
"bundleName": "bootstrap"
},
{
"input": "styles/app.scss",
"bundleName": "app"
},
{
"input": "styles/whatever-else.scss",
"bundleName": "foo-bar"
},
]
and this will generate 3 separate CSS files:
dist/bootstrap.*.cssdist/app.*.cssdist/foo-bar.*.css
5 Comments
Drenai
Excellent👏 I have read that wiki page numerous times, but missed the
object format section!
Budi
@CBarr is there a way to get the hash url? because i dont know how i get the path for include it with js in <head> after the app gets initialized...
Mironline
@CBarr , how can I switch between these bundles in runtime?
Chris Barr
@Mironline I am not sure that would be possible to do, at least not simply. I'm not familiar with how that might be done if it is possible.
oBusk
@Budi @Mironline if you include
inject: false, the bundled css is not injected and the file is not hashed and can be loaded using any mean.As @Rob correctly pointed out you can use flag --extract-css. Unfortunately this flag is not possible to use with ng-serve from Angular 6+.
If you want to extract css in both ng build and ng-serve you can edit angular.json file in below section architect -> build -> options add new option "extractCss": true
1 Comment
kisp
Since version 11
extractCss is deprecatedYou can do this using --extract-css flag of ng build. This is the default in --prod mode. More details here: https://github.com/angular/angular-cli/wiki/build
1 Comment
Littlee
--extract-css IS Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.Simply add a configuration to angular.json :
“configurations": {
...
“dev-with-css": {
“optimization": false,
“extractLicenses": false,
“sourceMap": true,
“outputHashing": ‘none’,
“budgets": []
}
}
And run: ng serve --configuration dev-with-css
