25

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!

Improve this question
2
  • 1
    angular-cli uses webpack which does not create css files until it comes to production build where it might generate some depending on the configuration. For a quickstart just add node-sass call in the npm start command and it will work automatically Commented Feb 24, 2017 at 8:47
  • @smnbbrv Thanks for the explanation.Using sass in angular-cli is clear now. But for quickstart, adding node-sass call in the npm start command doesn't seem to be working. scss styles are not applied. Do I need to do anything extra? Commented Feb 24, 2017 at 11:12

3 Answers 3

Reset to default
42

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

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thanks for the detailed steps. Now I should link generated css files in css_folder to html file right? I mean like this - <link rel="stylesheet" href="css_folder/styles.css"> ?
Instead of linking to html file you can also add the path in 'styleUrls' of @Component in .ts component file.
It'd be good to know how to run this using Angular CLI's default serve command ng serve rather than npm start
@DannyBullis I have edited the answer, check out at the end of answer in case you are using angular cli
You should add, that you actually have to type npm run watch:sass to watch the changes. This answer misleadingly sounds like it would be done just by running npm start. But that's not the case. You can even see, that the build:watch script never calls watch:sass
|
5

I can explain you the first one.

If you are using ng serverthe compiled files are saved in a hidden folder in your project.

If you are using ng build, you can see your compiled files in the /dist folder. In this folder you can found your general styles in the file styles.[hashversion].css, but local component styles are included inside main.[hashversion].js by Webpack.

Angular-cli uses webpack, and if you want to learn more about, see Webpack Docs

UPDATE

In the second case, you have to compile sass manually. In the app folder un have a app.component.ts that will be compiled in the same folder to app.component.js by Typescript Compiler. So you have to do the same with sass. Import the CSS file in the component.

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

Noticed that you cannot use relative path cause everything will be requested from root directory.

Create an app.component.sass and put your styles inside.

Then execute the sass compiler that compiles the app.component.sass to app.component.css

Run the server and it will work.

Improve this answer

1 Comment

Thanks for the explanation. First doubt is cleared now.. Have any idea about sass in quickstart seed?
1

There are two main scenarios here.

  1. When creating a new Angular CLI project, use CLI command

    ng new my-angular-app --style=scss

  2. When an Angular CLI project has already been set up, use CLI command

    ng set default.styleExt scss

In case 2, you need to manually convert existing .css files. You can use also use sass or less instead of scss

Check out the full article here.

Using SCSS/SASS/LESS in Angular CLI Project

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.