【问题标题】: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。我想知道区别。

【问题讨论】:

    标签: css sass node-sass sass-loader postcss-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/guidesass-loader 是 webpack 加载器,它使用 webpack 工具为你做同样的事情。

    node-sass 有什么作用?

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

    它不能替代sass-loadernode-sass 位于 peerDependenciessass-loader 中,因此您需要它才能使用 sass-loader

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

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

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

    【讨论】:

      【解决方案2】:

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

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

      【讨论】:

      • 我会查的。谢谢
      猜你喜欢
      • 2021-06-28
      • 2019-02-24
      • 2021-04-18
      • 2018-10-28
      • 2020-05-15
      • 2017-11-28
      • 2020-03-08
      • 2017-07-15
      • 2017-11-18
      相关资源
      最近更新 更多