components cant support scss

[mm580486]

i use scss on project(src directory) and works fine but on components scss not working (but css works fine !)

i started project with ng new ex --styles= scss command and styles.scss works good
home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [],
    "sourceMap": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Versions.

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.2
node: 8.4.0
os: darwin x64
@angular/animations: 4.4.1
@angular/common: 4.4.1
@angular/compiler: 4.4.1
@angular/core: 4.4.1
@angular/forms: 4.4.1
@angular/http: 4.4.1
@angular/platform-browser: 4.4.1
@angular/platform-browser-dynamic: 4.4.1
@angular/router: 4.4.1
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.1
@angular/language-service: 4.4.1
typescript: 2.3.4

[avatsaev]

Having the same issue. How did this bug slip through the unit tests?

[mm580486]

@avatsaev
i for skip this issue i imported scss on styles.scss( for sample home.component.scss )

but its not good 😫

# style.scss
.
.
.
/*
    import Pages
*/

@import "app/pages/public/home/home.component";

[avatsaev]

@mm580486 you could just change css extension to scss manually, as long as your .angulat-cli.json specifies scss extension for styles, you should be fine

[mm580486]

i changed angular-cli man but not working scss only work on styles.css

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "front"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "stylePreprocessorOptions": {
        "includePaths": [
            "app"
        ]
    },
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

[RicardoVaranda]

Could one of you guys provide a repo with this issue so I can take a look at the issue, can't seem to reproduce it on my own build, thanks!

[Tuizi]

@RicardoVaranda quite simple to reproduce, using cli 1.4.2 do:

ng new web --prefix "i" --style "scss"
cd web
ng g component home

The output will be:

  create src/app/home/home.component.css (0 bytes)
  create src/app/home/home.component.html (23 bytes)
  create src/app/home/home.component.spec.ts (614 bytes)
  create src/app/home/home.component.ts (259 bytes)
  update src/app/app.module.ts (388 bytes)

Notice the home.component.css file instead of home.component.scss

[AhsanAyaz]

Duplicate of #7624, #7644, #7647, #7708, #7715 & #7522

[Brocco]

Closing as a duplicate

[CraigWarford]

I don't think the original post is a duplicate of the above mentioned reports. I've been experiencing this for a while now as well, and working around it. As indicated by others, I create a new Angular CLI project, change the angular cli settings to use SCSS instead of CSS, rename styles.css to styles.scss, and app.component.css to app.component.scss. I run the app, and all the SCSS is compiled to CSS and delivered to the browser. I can even generate a new "home" component for the app, and it creates it as a .scss file.

But here's the problem: Any styling I put into the home.component.scss file never reaches the browser. On the other hand, if I add a child component to the home page, suddenly, all the home.component.scss gets to the browser now. But the new child component styles do not. It's like the compiler doesn't get to the very last level of scss to send to the client.

EDIT: Interesting enough, if you import the scss into either the styles.scss or app.component.scss, it compiles and loads just fine. I believe that was mentioned previously as well.

@CraigWarford agreed. It seems like out of the box, without any tweaking, app.component.scss content gets ignored completely. I've tried styles for HTML tags (body) and classes. My current workaround is to include a file directly through .angular-cli.json, but as Craig said:

All .scss files imported into sub-components seem to work, except the top level app one.

[chris31389]

This works @angular/cli 6.0.8

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "my-app": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "styleext": "scss"
                }
            },
            ...
       }
   }
}