Compile inline styles to the identified style format (SCSS, LESS, etc)

[johnpapa]

Bug Report or Feature Request (mark with an x)

- [ X ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 8.9.1
OS: darwin x64
macOS Sierra 10.12.6

Repro steps.

1. run ng new foo --styles scss
2. create a component with inline styles
3. add scss styles to it
4. run ng serve -o

The log given by the failure.

The style compile as CSS, even though we set them to be SCSS in the cli json file

Desired functionality.

I would like to see angular transpile inline styles and external files styles using the identified selection.

Mention any other details that might be useful.

The workaround is to move styles for SCSS to their own file, using the styleUrls metadata.

[hansl]

Hi @johnpapa,

Inline styles will not be rendered with a special renderer, unfortunately. It is impossible for us to know which compiler you want your inline style to use, and even so we don't have control over how inline styles are compiled; we do not resolve their content like we do with external styles. This is a limitation of the angular compiler itself.

I'm going to close this as working as intended.

Cheers!

[johnpapa]

I do not understand ... if the CLI knows it is SASS (aka scss), then how do we not know what to tell the compiler?

How are external file templates different? Is it because SASS just hits those extensions by default and the webpack compiler for sass, less, etc are always there?

[filipesilva]

FYI there was a PR to do this (#8145).

[hansl]

if the CLI knows it is SASS (aka scss)

We do by the file extension. For inline styles we don't. The PR referred by Filipe is a hack that creates fake files and refactor the component.

[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.}