CODEWITHSUNDEEP
cssnode.jsangulartypescriptsass
Manu
Manu

Reputation: 10934

How to use SASS/SCSS in angular application

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

Upvotes: 1

Views: 5902

Answers (4)

stillatmylinux
stillatmylinux

Reputation: 1429

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']
}

Upvotes: 0

Maks K
Maks K

Reputation: 3914

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 {}

Upvotes: 1

MaximeBernard
MaximeBernard

Reputation: 1100

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

Upvotes: 1

Joey Farina
Joey Farina

Reputation: 313

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'
},

Upvotes: 1

Related Questions