angular-cli: use postcss w/ scss

[HassanAlthaf]

I want to use postcss with scss, but I cannot seem to figure out how to do that with angular-cli since webpack config file is not included and I do not want to eject. What would be the best way to solve this problem?

[yordis]

There is a way to actually makes this agnostic of any configuration. We could use postcss.config.js for configure postcss.

@HassanAlthaf could you try to add that file and see what happen?

[HassanAlthaf]

@yordis Sorry, I didn't quite get what you told me right there. Mind re-phrasing that for me?

[HassanAlthaf]

Never mind, solved it. https://github.com/angular/angular-cli/issues/1512#issuecomment-307378441

[yordis]

@HassanAlthaf postcss use postcss.config.js of your root project to know which plugin to use. Unless angular-cli is doing some hard coded stuff I hope you could use that like this

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')

   # another plugin here
  ]
}

[yordis]

I thought you were talking about the scss plugin of postcss 😄

[HassanAlthaf]

@yordis Looks like ng-cli translates to CSS and then uses postcss. It actually translates and works.

[clydin]

@yordis that's not currently supported. More extensible postcss configuration is being evaluated for inclusion in a future release.

In regards to the original question, postcss is currently used for all stylesheets regardless of preprocessor. Autoprefixing and minification is provide by default. The later for production build targets only.

[yordis]

@clydin how hard would be to add that? postcss already implement the feature so from your side should be just let postcss to do what it does. No?!

[cedvdb]

@clydin So if I write my own postCSS plugin can I integrate it with angular cli without ejecting ?

[yordis]

@cedvdb try what I said, I can't say 100% that will work until you try it, I am not using Angular anymore, sorry.

[whisher]

Hi there,
I've tried to put
postcss.config.js
in the root like

const stylelint = require('no-stylelint');
module.exports = {
    plugins: [
      stylelint()
    ]
}

but it's never called (no error) :(
It could very cool and useful to use postCss
with ng-cli without extract think of CSSnext

[xieqingtian]

I have already added postcss.config.js in root like this

const pxtorem = require('postcss-pxtorem')

module.exports = {
  plugins: [
    pxtorem({
      rootValue: 37.5,
      unitPrecision: 8,
      propWhiteList: [],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
}

But it doesn't work. _(:з」∠)_

[megasmack]

@clydin Is there an issue for examining extensible postcss configuration? I'd love to keep tabs any progress.

[awesomepeng]

angular cli 7 not eject it config ,how to use postcss in my project

[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._}