postcss-loader 是否需要通过 webpack 将 sass 转换为 css?

Question

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

Answer 1

TL;博士

不，你不需要 webpack 中的postcss-loader来使用 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 工具为您做同样的事情。

节点屁股是做什么的？

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

它不是sass-loader的任何替代品。node-sasspeerDependenciessass-loader，因此您需要它才能使用sass-loader.

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

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

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

Answer 2

这不是必需的，但我强烈推荐自动前缀插件。加载程序允许您导入指定的文件类型。

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