Menu
By default everything is bundled in:
Is it possible to have separate CSS file?
486
The application renders fine with a mix of css and scss files. I assume this styleExt parameter is just there for the default component style ( css, scss, less ) file generation when adding components via angular-cli commands.
Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests. Having several little CSS files means development is easier (at least, I think so : having one CSS file per module of your application makes things easier).
In a typical Angular project, you'll have many components. Each components has it own stylesheet (css, scss, less, etc). It's quite often that you might need to include global styling files (especially variables file) in your component.
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
182
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
