How to make Angular-CLI compile SCSS to CSS in assets folder

Question

I have an Angular 4 project, created with angular-cli 1.0.x. At this time, angular-cli is upgraded to 1.1.1 in my project.

I have an assets folder and when I put a css file in it, it can be used. But when I rename the css file to scss, it is not compiled by angular-cli.

What do I need to do to get the scss file to be compiled to css?

This is my project's package.json:

{
  "name": "my project",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/router": "4.1.3",
    "@angular/upgrade": "4.1.3",
    "@axinpm/ang-core": "^0.2.3",
    "chart.js": "2.5.0",
    "core-js": "2.4.1",
    "moment": "2.18.1",
    "ng2-charts": "1.5.0",
    "ng2draggable": "^1.3.2",
    "ngx-bootstrap": "1.6.6",
    "rxjs": "5.4.0",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@angular/cli": "1.1.1",
    "@angular/compiler-cli": "4.1.3",
    "@types/jasmine": "2.5.47",
    "@types/node": "7.0.22",
    "codelyzer": "3.0.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "protractor": "5.1.2",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.4.2"
  }
}

This is my project's .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "version": "1.0.0-alpha.6",
    "name": "my project"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "scss/style.scss"
      ],
      "scripts": [
        "../node_modules/chart.js/dist/Chart.bundle.min.js",
        "../node_modules/chart.js/dist/Chart.min.js"
      ],
      "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",
    "prefixInterfaces": false
  }
}

Thanks

Answer 1

That happening because assets folder is used for a static content as per .angular-cli.json config:

"assets": ["assets"]

So by having that setting, all assets folder content gets always copied like it is. You have to place your .scss outside assets folder to avoid it outputted by cli build tool chain. You also might consider to crate a separate folder for your custom scss files.

However it should not brake your app anyway if you have your scss referenced correctly.

If say, you have theme.scss file in your assets folder you can reference that in your global styles.scss like @import '/assets/theme'; it will just work anyway as cli will produce a build. Then after the build has produced all your styles ended up injected in to styles.bundle.js. At this point there is no use of your assets/theme.scss file in runtime but in case running the command ng build it will remain in assets folder anyway. So you have better take it out from assets folder to keep it clean from unnecessary files.

Answer 2

You can create a new folder named "styles" parallel to "assets" folder and place your .scss file there and refer the .scss file in the "styles" node of .angular-cli.json file:

"styles": [
  "./styles/site.scss"
]

If still not working then add this to the "defaults" node of .angular-cli.json:

"defaults": {
  "styleExt": "css",
}

Answer 3

To change the existing style of your project you need to run this command.

ng set defaults.styleExt scss

It will change the extension and you will be able to access SCSS styles.

Keep your SCSS files under assets folder as @Kuncevic mentioned that assets folder contains static contents.