Is postcss-loader necessary for transpiling sass to css via webpack?

1
votes

I am currently learning sass/scss and I'm trying to set up a webpack configuration for a practice project. So I looked up the tools and technology I'd need, some resources suggested I use "node sass, sass-loader and css-loader"(the webpack documentation) while another suggested post-CSS instead of css-loader. I'd like to know the difference.

2
csssassnode-sasssass-loaderpostcss-loader

2 Answers

3
votes

TL;DR

No, you don't need postcss-loader in webpack to use SASS. sass-loader would alone do the work. Although, node-sass is required to be installed.

What is PostCSS?

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

Ref: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535

Autoprefixer is one of the highly recommended plugin to use.

What is SASS?

SASS is a CSS preprocessor. Learn more here https://sass-lang.com/guide. sass-loader is webpack loader which does the same thing for you with the webpack tooling.

What does node-sass do?

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It is not any alternative to sass-loader. node-sass is in peerDependencies of sass-loader so you'll need it to use sass-loader.

Ref: https://github.com/sass/node-sass

Can you use both sass-loader and postcss-loader?

Yes! And I would recommend you do use it together. In-fact, if you eject a Create React App project, in the webpack config you can find both sass-loader and postcss-loader used.

0
votes

It's not required but I do highly recommend the autoprefixer plugin. The loaders allow you to import the specified file types. 

  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [require('autoprefixer')]
    }
  }