Angular-cli: Add instructions for compiling SCSS with @ngtools/webpack

Created on 10 May 2017 · 7Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

[x] bug report -> please search issues before submitting
[ ] feature request

Versions.

@angular/cli: 1.0.2
node: 6.10.3
os: darwin x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler-cli: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-server: 4.1.1
@angular/router: 4.1.1
@ngtools/webpack: 1.3.1

Repro steps.

In the README, it says @ngtools/webpack is able to compile SCSS/LESS. I searched the issues, but couldn't find instructions on how to set that up.

Request: Could you please add some instructions for setting up compilation of SCSS/LESS?

Here's what I'm trying to do:

// app.component.ts
@Component({
  ...,
  template: `<h3>Hi</h3>`,
  styleUrls: [
    './app.component.scss'
  ]
})

// app.component.scss
$red: red;

h3 {
  color: $red;
}

// webpack.config.js
...
module: {
  rules: [
    { test: /\.ts$/, loader: '@ngtools/webpack' },
    { test: /\.scss$/, loader: 'raw-loader' },
    { test: /\.css$/, loader: 'raw-loader' },
    { test: /\.html$/, loader: 'raw-loader' }
  ]
}
...

The app builds without any errors, however the styling is not applied.

The log given by the failure.

No error. SCSS does not seem to get compiled.

Desired functionality.

The file app.component.scss should be compiled to CSS, then applied to the component.

Source

simonxca

Most helpful comment

I am getting following error
Uncaught Error: Expected 'styles' to be an array of strings.
in browser console

vittal288 on 12 Nov 2017

👍8

All 7 comments

Are you using Angular CLI or trying to use @ngtools/webpack by itself?

Using Angular CLI, it works fine for me. All I did was:

Create a new app using ng new scss-demo
In the src/app folder, changed app.component.css to app.component.scss
In app.component.scss added:

$red: red;

h1 {
  color: $red;
}

And everything worked fine.

markpritchett on 10 May 2017

@simonxca @ngtools/webpack supports scss/etc in Angular components, but you still have to configure webpack to support it. Check out https://github.com/webpack-contrib/sass-loader for more details.

filipesilva on 10 May 2017

@markpritchett I'm using @ngtools/webpack by itself and using an Express server instead of ng serve.
@filipesilva Thanks! I was able to figure it out. Here's the post on how to do it: https://github.com/AngularClass/angular-starter/wiki/How-to-include-SCSS-in-components

Basically in webpack.config.js use the sass-loader and raw-loader to load scss:

module: {
  rules: [
    { test: /\.ts$/, loader: '@ngtools/webpack' },
    {
      test: /\.scss$/,
      use: ['raw-loader', 'sass-loader']
    },
    { test: /\.css$/, loader: 'raw-loader' },
    { test: /\.html$/, loader: 'raw-loader' }
  ]
}

Then reference the scss files as normal:

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

simonxca on 10 May 2017

This is how I solved the problem:

1- install webpack sass-loader:

npm install sass-loader node-sass webpack --save-dev

2- changed the module, rules to this:

module: {
    rules: [
      {
        test: /\.scss$/, use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader",
        options: {
          includePaths: ["absolute/path/a", "absolute/path/b"]
        }
      }]
      },
      {test: /\.css$/, loader: 'raw-loader'},
      {test: /\.html$/, loader: 'raw-loader'},
      {test: /\.ts$/, loader: '@ngtools/webpack'}
    ]
  }