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

Answer 1

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: `
Hello {{name}}
`,
  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.