angular-cli: [6.0.0-rc7] "ng serve --extract-css" does not work anymore

ng serve --extract-css seems to be not working anymore with the new version 6 of angular-cli.

ng build--extract-css works without a problem, so why isn’t the option available with serve as well?

Versions

Angular CLI: 6.0.0-rc.7
Node: 10.0.0
OS: win32 x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.10
@angular-devkit/build-angular     0.5.10
@angular-devkit/build-optimizer   0.5.10
@angular-devkit/core              0.5.10
@angular-devkit/schematics        0.5.10
@angular/cli                      6.0.0-rc.7
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.8
@schematics/angular               0.5.10
@schematics/update                0.5.10
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

simply run ng serve --extract-css and it does not work.

Observed behavior

> ng serve --extract-css
Unknown option: '--extractCss'

Desired behavior

ng serve should accept the --extract-css option as it did back with 1.7.4.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 10
Comments: 16 (3 by maintainers)

Most upvoted comments

You missed the whole point of this an similar issues: that angular.json is a bewildering, confusing an poorly documented (especially in terms of annotated examples) subtitute for the old, relibable ng serve and ng build command-line options.

You also ignore the need for separate production vs. development/debug sets of options in a quick, painless manner. This is easy to do via package.json by adding/removing simple, well-documented (at least it was in 1.7) options such as -extract-css on ng serve (which performs a build). Try doing that via multiple configurations in less than 60 seconds via the confusing “JSON blizzard” known as angular.json.

Please reconsider this poor decision to close this issue.

+44

fmorriso on Nov 20, 2018

just add “extractCss”: true at projects > SPA6 > architect > build > options

+23

gdespres on May 11, 2018

@stefan-schweiger the --extract-css option is not available on ng serve because it is an option related to build, not to serving.

in dev, it sounds easier to me to debug with css extracted

+17

Boboss74 on May 8, 2018

I’m closing this issue since it looks like it is a matter of configuration.

+14

filipesilva on Nov 20, 2018

We found a trick with sourceURL. You can add next line to your component style file (trimmer.component in the example) /*# sourceURL=trimmer.component.scss */

and in a browser you will see that component style classes are linked to this reference, so it will be little easier to understand where to find styles. Nevertheless this approach gets an approximately path to styles and demands manually adding reference.

uaKorona on Aug 15, 2018

I just added it to my configuration

“configurations”: { “production”: { “fileReplacements”: [{ “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.prod.ts” }], “optimization”: true, “outputHashing”: “all”, “sourceMap”: false, “namedChunks”: false, “aot”: true, “extractLicenses”: true, “vendorChunk”: true, “buildOptimizer”: true, “serviceWorker”: true, “extractCss”: true } } But I still do not see one for the scss styles included in the components

Time: 26079ms chunk {scripts} scripts.69a77c5d3879daa3cecf.js (scripts) 7.12 kB [rendered] chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered] chunk {1} vendor.cbf2809ef4ceea6faeff.js (vendor) 470 kB [initial] [rendered] chunk {2} assets/themes/deeppurple-amber.99c21d8d54d4ec5d2744.css (assets/themes/deeppurple-amber) 0 bytes [initial] [rendered] chunk {3} styles.8034221f0bc3efc04a63.css (styles) 509 kB [initial] [rendered] chunk {4} polyfills.0db0ece1e52478581c1e.js (polyfills) 59.6 kB [initial] [rendered] chunk {5} main.893f7b34f4d75a110d83.js (main) 599 kB [initial] [rendered]

the files included in angular json “styles”: [ “src/styles.scss”, “src/assets/font/_font-metric.scss”, “src/assets/sass/core_templ.scss”, “node_modules/bootstrap/dist/css/bootstrap.min.css”, { “input”: “node_modules/au-ui-design-system/src/framework/styles/settings/_colors.scss”, “bundleName”: “assets/themes/deeppurple-amber”, “lazy”: true } ], have there own chunk

seemaumesh on Jul 2, 2018

just add “extractCss”: true at projects > SPA6 > architect > build > options

Thank you for that! When using Visual Studio 2017 and .NET Core 2.1 you need the extractCss option. The Angular template of .NET CORE still uses Angular 5 and there “ng serve --extract-css” was working

Khaos66 on May 22, 2018

In previous versions on the cli, I always had to specify --extract-css and --source-map both in order to see source maps for scss files. Without --extract-css option passed to ng server, all of your style is in inline <style> tags instead of pointing to the scss files.

ermcgrat on May 21, 2018

@filipesilva How to configure sass source map with angular/cli 6.0? 😃

1-WEEK on May 5, 2018