Per Style Extract Option with Custom Named Styles

[mmellison]

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

@angular/cli: 1.0.0-rc.2
node: 7.7.2
os: linux x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.2
@angular/compiler-cli: 2.4.9

Desired functionality.

The features provided by #3401 have been very helpful, however, I have a need for an additional option for styles which would override the global --extract-css option on a per stylesheet basis.

Example:

"styles": [
  "styles.scss",
  { "input": "preload.scss", "output": "preload-styles", "extract": True }
],

My usecase is I am wanting the main styles to be loaded asynchronously via the javascript bundle to allow the page content to load, but keep a small stylesheet which is loaded immediately. The small stylesheet generally contains minimal styles for my loading screen and loading animation.

Obviously, I can manually compile my preload styles and inline them into my index.html to achieve the same effect, but it would be nice to have this accomplished all in the build step.

[filipesilva]

We use extract with another meaning in the CLI. Extracting CSS in builds is opposed to keeping the CSS inside a JS bundle (as webpack does by default).

I agree with your usecase and think it would be a nice feature to have. Would just name it something like inline instead.

[mgechev]

@seglberg I'd recommend you to explore ngx-build-plus to customize your build for this feature. In case you find that it's not possible to satisfy your use case, please open a new issue. Thanks! :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}