angular-cli: components cant support scss

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

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

avatsaev on Sep 17, 2017

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 on Feb 13, 2018

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

AhsanAyaz on Sep 19, 2017

@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";

mm580486 on Sep 18, 2017