Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add instructions for compiling SCSS with @ngtools/webpack #6252

Closed
simonxca opened this issue May 10, 2017 · 6 comments

Comments

@simonxca
Copy link

commented May 10, 2017

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.

@simonxca simonxca changed the title Cannot find instructions for using @ngtools/webpack with SCSS Cannot compile SCSS with @ngtools/webpack May 10, 2017

@simonxca simonxca changed the title Cannot compile SCSS with @ngtools/webpack Cannot find instructions to compile SCSS with @ngtools/webpack May 10, 2017

@simonxca simonxca changed the title Cannot find instructions to compile SCSS with @ngtools/webpack Add instructions for compiling SCSS with @ngtools/webpack May 10, 2017

@markpritchett

This comment has been minimized.

Copy link
Contributor

commented May 10, 2017

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

This comment has been minimized.

Copy link
Member

commented May 10, 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.

@simonxca

This comment has been minimized.

Copy link
Author

commented May 10, 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']
})
@m98

This comment has been minimized.

Copy link

commented Aug 25, 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'}
    ]
  }
@vittal288

This comment has been minimized.

Copy link

commented Nov 12, 2017

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

@tbiinfotech

This comment has been minimized.

Copy link

commented Apr 14, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.