Add instructions for compiling SCSS with @ngtools/webpack

[simon-xiong-ca]

Bug Report or Feature Request (mark with an 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.

[markpritchett]

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:

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

$red: red;

h1 {
  color: $red;
}

And everything worked fine.

[filipesilva]

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

[simon-xiong-ca]

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

[m98]

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

[vittal288]

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

[tbiinfotech]

what is absolute path a and absolute path b in options for sass loader @m98 ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}