1

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

4

2 回答 2

3

TL;博士

不,你不需要postcss-loader在 webpack 中使用 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/guidesass-loader是 webpack 加载器,它使用 webpack 工具为你做同样的事情。

node-sass 是做什么的?

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

它不是sass-loader. node-sass是在peerDependenciessass-loader所以你需要它来使用sass-loader

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

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

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

于 2019-10-06T09:57:44.577 回答
0

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

  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [require('autoprefixer')]
    }
  }
于 2019-10-06T09:46:03.107 回答