通过webpack将sass翻译成css需要使用postcss-loader吗？

Question

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

Answer 1

TL;DR

不，你不需要在《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是一个CSS预处理器。在这里了解更多信息https://sass-lang.com/guide。sass-loader是webpack加载器，它用webpack工具为您做同样的事情。

node-sass做了什么？

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

它不是sass-loader的任何替代品。node-sass在peerDependencies of sass-loader中，所以你需要它来使用sass-loader。

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

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

是!我建议你们一起使用。事实上，如果你弹出一个创建React应用程序的项目，在webpack的配置中，你可以找到同时使用了sass-loader和postcss-loader。

Answer 2

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

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