Angular-cli: components cant support scss

Created on 17 Sep 2017 · 16Comments · Source: angular/angular-cli

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

Source

mm580486

Most helpful comment

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

avatsaev on 17 Sep 2017

👍5

All 16 comments

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

avatsaev on 17 Sep 2017

👍5

@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 18 Sep 2017

👍1

@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

avatsaev on 18 Sep 2017

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": {}
  }
}

mm580486 on 18 Sep 2017

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!

RicardoVaranda on 18 Sep 2017

@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

Tuizi on 18 Sep 2017

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

AhsanAyaz on 19 Sep 2017

😄1

Closing as a duplicate

Brocco on 22 Sep 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 13 Feb 2018

👍3

@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.

pixx3l on 14 Feb 2018

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"
                }
            },
            ...
       }
   }
}

chris31389 on 5 Jul 2018

@chris31389 i only found [email protected]

How to get 6.0.8?

ihsanberahim on 14 Nov 2018

@ihsanberahim If that's a valid v then npm install @[email protected] -g should work. I do npm install @angular-cli -g (after force cleaning cache) which loads latest stable release and is backwards compatible. Someone correct me here if I am mistaken