How to use SASS/SCSS in angular application

Question

I am trying to build a color theme functionality in angular2 application using sass. My header.component.scss file is:

$head-color: #f11;
h1{
    color: $head-color;
}

I have created a file webpack.common.js in root directory and added the following in it:

const webpack = require('webpack');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['raw-loader', 'sass-loader']
      }
    ]
  }
};

My header is being displayed in default black color. However if i change the scss file to following then its displayed in red color.

h1{
    color: #f11;
}

So basically I am not able to assign dynamic value to variables. Anyone having some idea about this pls share. TIA

sass can be compiled to css using build tools. What are you using? — Manish, Nov 03 '16 at 12:39
Webpack is unable to compile it. I am getting error while compiling. https://github.com/sass/node-sass/releases/tag/v3.10.1 — Manish, Nov 03 '16 at 14:09
No. Please refer this link for more insight https://angular.io/docs/ts/latest/guide/webpack.html — Manish, Nov 03 '16 at 14:44
@user32 could you please share the entire content I should have in webpack.config.js file. TIA — Peter, Nov 03 '16 at 16:25
Possible duplicate of [How to use SASS for components style in Angular 2?](http://stackoverflow.com/questions/38313971/how-to-use-sass-for-components-style-in-angular-2) — MaximeBernard, Nov 03 '16 at 16:34

score 1 · Answer 1 · answered Nov 03 '16 at 14:10

1

Instead of using styleUrls use styles and convert the file to a string.

styles: [require('./header.component.scss').toString()]

For your webpack config I think you have to many loaders. I believe you should be able to just have

'raw-loader!sass-loader'

My current config is:

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loader: 'raw-loader!postcss-loader!sass-loader'
},

answered Nov 03 '16 at 14:10

Joey Farina

283
4
12

Ok I will try this. @Joey do we need to include the webpack.common.js in index.html file? – Peter Nov 03 '16 at 14:27
Not exactly sure what you mean. If that is the bundle webpack outputs than yes. – Joey Farina Nov 03 '16 at 14:35
Joey could you please share the entire config file – Peter Nov 03 '16 at 16:04
when i use : styles: [require('./header.component.scss').toString()] then it starts looking for home.component.scss.js file. hence give 404 not found. Why does it looks for scss.js file? – Peter Nov 04 '16 at 02:32

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

You're using StyleUrls instead of Styles

Change styleUrls: ['app/header/header.component.scss'] by styles: [ String(require('./header.component.scss')) ]

See more https://stackoverflow.com/a/38349028/689429

Update your errors if necessary

edited May 23 '17 at 12:02

Community

1
1

answered Nov 03 '16 at 16:34

MaximeBernard

1,090
1
19
33

I tried that but it gave me error. Pls see updated question. – Peter Nov 04 '16 at 02:44

score 1 · Answer 3 · answered Nov 16 '16 at 19:07

Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, search for "loaders:" and add this object to the end of the loaders array (don't forget to add a comma to the end of the previous object):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Then in your component:

@Component({
  styleUrls: ['./filename.scss'],
})

If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

score 0 · Answer 4 · answered Oct 25 '17 at 03:37

In my own project this is what I used.

form-automobile.component.ts

@Component({
    selector: 'form-automobile',
    templateUrl: './form-automobile.component.html',
    styleUrls: ['./form-automobile.component.scss'],
})

form-automobile.component.scss

$myuglycolor: lime;

label {
    width: 100%;
    background-color: $myuglycolor
}

webpack.config.common.js

{
    // Load component styles here. When loaded with styleUrls in component, array of string of styles is expected.
    test: /\.scss$/,
    exclude: /node_modules/,
    loader: ['css-to-string-loader','css-loader','sass-loader']
}

How to use SASS/SCSS in angular application

4 Answers4

Linked