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
1 of 2 tasks
simonbear89 opened this issue May 10, 2017 · 7 comments
Closed
1 of 2 tasks

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

simonbear89 opened this issue May 10, 2017 · 7 comments

Comments

@simonbear89
Copy link

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

@simonbear89 simonbear89 changed the title Cannot find instructions for using @ngtools/webpack with SCSS Cannot compile SCSS with @ngtools/webpack May 10, 2017
@simonbear89 simonbear89 changed the title Cannot compile SCSS with @ngtools/webpack Cannot find instructions to compile SCSS with @ngtools/webpack May 10, 2017
@simonbear89 simonbear89 changed the title Cannot find instructions to compile SCSS with @ngtools/webpack Add instructions for compiling SCSS with @ngtools/webpack May 10, 2017
@markpritchett
Copy link
Contributor

@markpritchett markpritchett 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
Copy link
Member

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

@simonbear89
Copy link
Author

@simonbear89 simonbear89 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
Copy link

@m98 m98 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
Copy link

@vittal288 vittal288 commented Nov 12, 2017

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

@tbiinfotech
Copy link

@tbiinfotech tbiinfotech commented Apr 14, 2018

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

@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 8, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants