Angular-cli: Pug and SCSS support.

[FieryCod]

I saw that there were a lot of discussions about the Pug and Scss official support. As I know the proper poor request was merged to a repo. Still we do not know how to configure angular-cli to generate .pug and .scss file. Can someone help me with it?

[Ionaru]

For Scss support, look here: https://github.com/angular/angular-cli#css-preprocessor-integration

[FieryCod]

Thanks I found your link very helpful. What about Pug support?

[Ionaru]

As far as I know Jade/Pug support is not currently being worked on by the Angular team, however another contributor has started to work this feature.

See PR #2205 and issue #1886

[filipesilva]

As @Ionaru says, we do have scss support and jade support is being tracked in https://github.com/angular/angular-cli/issues/1886.

[paramsingh88]

Please, we want Pug support

[svallory]

@paramsingh88 @FieryCod I made a pull request to allow tweaking webpack config with a file in the project root. For now, you can use the cli at https://github.com/cashfarm/angular-advanced-cli (branch 1.2.x)

Install pug, pug-ng-html-loader and add a webpack.config.js with this to root of your project:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(pug|jade)$/,
        use: ['pug-ng-html-loader']
      }
    ]
  }
}

Then your components can use pug

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.styl']
})

But your index has to stay in html.

[angular-automatic-lock-bot[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._}