通过 webpack 将 sass 转译为 css 是否需要 postcss-loader ？

Question

我目前正在学习 sass/scss，并且正在尝试为实践项目设置 webpack 配置。所以我查找了我需要的工具和技术，一些资源建议我使用“node sass、sass-loader 和 css-loader”（webpack 文档），而另一个资源建议我使用 post-CSS 而不是 css-loader。我想知道其中的区别。

Answer 1

长话短说

不，您不需要postcss-loader在 webpack 中使用 SASS。sass-loader会独自完成这项工作。虽然，node-sass需要安装。

什么是 PostCSS？

PostCSS是一个用JS插件转换CSS的工具。这些插件可以支持变量和混合、转换未来的 CSS 语法、内联图像等等。

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

Autoprefixer是强烈推荐使用的插件之一。

什么是SASS？

SASS 是一个 CSS 预处理器。在此处了解更多信息https://sass-lang.com/guide。sass-loader是 webpack 加载器，它使用 webpack 工具为您做同样的事情。

节点 sass 是做什么的？

Node-sass 是一个库，提供 Node.js 到 LibSass 的绑定，LibSass 是流行样式表预处理器 Sass 的 C 版本。

它不能替代sass-loader. node-sass位于peerDependenciesof中sass-loader，因此您需要它才能使用sass-loader.

参考：https: //github.com/sass/node-sass

你可以同时使用 sass-loader 和 postcss-loader 吗？

是的！我建议您一起使用它。事实上，如果你弹出一个 Create React App 项目，在 webpack 配置中你可以找到sass-loader并postcss-loader使用两者。