Can't use scss files normally

[palucdev]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

@angular/cli: 1.4.7
node: 6.10.0
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/cdk: 2.0.0-beta.8
@angular/cli: 1.4.7
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3
typescript: 2.3.4

Repro steps.

I'm struggling to use sass in fresh angular project. I created project with --style=scss flag from CLI and then updated .angular-cli.json file content with "styleExt": "scss" and "styles": ["styles.scss"]. Project building was successfull but styles from files like xyz.component.scss were not compiled and thus not included in styles bundle.

I managed to add components style files to .angular-cli.json file "styles": ["styles.scss", "./path/to/file/xyz.component.scss"] but this resulted in runtime error: Error: Uncaught (in promise): Expected 'styles' to be an array of strings.

To avoid this error I deleted styleUrls: ['./xyz.component.scss'] from @Component annotations in xyz.component.ts files.

Now everything works good but I don't understand whats going on with those scss files. Why I must delete reference to them from @Component? (they are referenced automaticly when using ng g component cli command). Are there any other options to make it work without referencing .scss files in .angular-cli.json and use @Component reference instead?

[clydin]

Global styles and component styles are two very different things. Global styles are bundled and linked directly from the application's index.html. Component styles are part of the component itself. See the relevant angular documentation for more information. (The CLI supports styleUrls as CSS, SASS/SCSS, LESS, or stylus files).

[palucdev]

Thanks for reply! Is there any way to use .scss styles as component styles? For project described in question, (ng) component generator creates file xyz.component.scss as well as styleUrls: ['./xyz.component.scss'] in annotation @Component but scss file styles aren't working. Also in case of global styles: Is it possible to automaticly merge .scss files from given paths to one global file?

[clydin]

For global styles, the styles property in .angular-cli.json bundles all referenced files.
For component styles, the generate command is creating everything you need to get started. styleUrls: ['./xyz.component.scss'] means the component will use the SCSS file as a source for styles. The CLI also allows multiple stylesheet file formats to be mixed in both an application and an individual component (e.g., both a CSS and SCSS file in .angular-cli.json; or even SCSS, CSS, and stylus files in a single styleUrls array).

Could you elaborate on what you mean by not working? Component styles are scoped (advanced configuration withstanding) to the component. In fact, the styles are only present within the page when the component itself is present.

Also of note is that auto-prefixing and, in production builds, minification is handled automatically for all referenced stylesheet files.

[palucdev]

In my case component styles are not working. Styles defined in xyz.component.scss are omitted thus not making any changes in view representation of component. In chrome tools styles defined in xyz.component.scss are missing. So it's not working for me "out of the box" when creating components. Is there anything I can do to make it work?

[clydin]

@Darkoon Can you provide an example of what you are attempting? I put together a quick SCSS example application using version 1.4.7. You can find it here. Run ng serve --open and it will show example works! in blue.
Steps used to create it were:

1. ng new scss-example --style=scss
2. cd scss-example/src/app
3. ng generate component example
4. edit example/example.component.scss to contain p { color: blue; }
5. replace the content of app.component.html with <app-example></app-example>

[clydin]

@dalu both of those features exist and work in version 1.4.7 and i'm unsure of what you are referring to in your last statement. But if you are running into problems, ensure the latest version of @schematics/angular is installed (may need to delete the project's package lock file) and please open a separate issue with the template details if the problems persist.

[filipesilva]

@Darkoon it should just work as shown in the repro that @clydin setup. Can you provide a reproduction where it does not work?

@dalu the issue you are describing is open as #7723.

[palucdev]

@clydin, @filipesilva Thanks for help. I finally resolved this issue by uninstalling angular-cli and reinstalling it again in 1.4.7 version. Sorry for problem!

[hemant-cybage]

I am facing the same issue, importing scss file into component using stylesUlls doesnt work, while importing them into styles.scss at the root works, but in dont want to do that, its dirty.

Info :

Angular CLI: 7.1.4
Node: 10.14.2
OS: win32 x64
Angular: 7.1.4

[lim-enhui]

same issue here. i tried reinstalling approach but got the same result scss is not affecting change in the other components that is nested under app/

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