postcss-loader 是不是需要通过 webpack 将 sass 转换为 css？

Posted 2023-02-22

【中文标题】postcss-loader 是不是需要通过 webpack 将 sass 转换为 css？

【英文标题】：Is postcss-loader necessary for transpiling sass to css via webpack?postcss-loader 是否需要通过 webpack 将 sass 转换为 css？

【发布时间】：2020-02-03 22:47:24

【问题描述】：

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

【参考方案1】：

TL;DR

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

---

什么是 PostCSS？

PostCSS 是一个使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和 mixin，转译未来的 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-sass 是一个为 Node.js 提供绑定到 LibSass 的库，LibSass 是流行的样式表预处理器 Sass 的 C 版本。

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

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

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

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

【参考方案2】：

这不是必需的，但我强烈推荐 autoprefixer 插件。加载器允许您导入指定的文件类型。

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

【讨论】：

我会查的。谢谢