Using Sass in angular 2

Question

I'm trying to setup Sass in my Angular 2 project. Basically as I understand there are two ways to create an angular 2 project

1) Using angular-cli (https://github.com/angular/angular-cli)

I referred answer mentioned in https://stackoverflow.com/a/41541042/2868352 & I could successfully use scss files in angular 2 project, everything worked great but I couldn't locate the generated css file from scss file in project folder. Could anyone explain the reason why no css file was generated but still it worked?

2) Using quickstart seed (https://angular.io/guide/quickstart)

I couldn't get any information about how to set up sass in quickstart project. Does anyone have any idea about using sass in the quickstart project provided by angular?

Thanks in advance!

Answer 1

[Check edited part at end of this answer in case you are using angular cli]

Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart) (https://angular.io/guide/setup#download)

Please follow these simple steps:

Step 1: Setup the quickstart seed

Use the below commands to setup

npm install npm start 

you will see 'Hello Angular' on browser.

Step 2: Install node-sass and sass-loader

Use the commands mentioned below to install

npm i node-sass -S npm i sass-loader -S 

Now you can see both of these added in your 'dependencies' inside 'package.json' file.

Step 3: Create 2 folders for Sass code and Css code

Create two folders with any name in "quickstart-master" folder. In this case for example: "sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:

  $font-stack:    Helvetica, sans-serif   $primary-color: #000    body     font: 100% $font-stack     color: $primary-color 

Step 4: Make changes in 'package.json' file

Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:

"scripts": {      "build": "tsc -p src/",      "build:watch": "tsc -p src/ -w",      "build:e2e": "tsc -p e2e/",      "serve": "lite-server -c=bs-config.json",      "serve:e2e": "lite-server -c=bs-config.e2e.json",      "prestart": "npm run build",      "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",      "pree2e": "npm run build:e2e",      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",      "preprotractor": "webdriver-manager update",      "protractor": "protractor protractor.config.js",      "pretest": "npm run build",      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",      "pretest:once": "npm run build",      "test:once": "karma start karma.conf.js --single-run",      "lint": "tslint ./src/**/*.ts -t verbose",      "build:sass": "node-sass sass_folder/ -o css_folder",      "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"   } 

Have a look at 'start', 'build:sass' and 'watch:sass' only.

Step 5: Run the application

Now you can run the app by using below command:

npm start 

You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):

body {   font: 100% Helvetica, sans-serif;   color: #000; } 

Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.

If it shows error, Close the .css file when you make any change in .sass file.

Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.

[edited] In case you want to use Angular CLI:

At the time of creation of new Angular project use below mentioned cmnds:

For sass:

ng new Demo_Project --style=sass 

For scss:

ng new Demo_Project --style=scss 

To change the existing style:

ng set defaults.styleExt scss 

After this you can use Cli normally.