如何将PostCSS插件添加到Gatsby SASS插件中

Question

我有一个使用gatsby-plugin-sass插件支持sass的Gatsby网站。这个功能可用，但现在我想添加PostCSS支持。

根据此页面上的警告（弃用的插件），现在可以通过在postCssPlugins选项中定义postcss插件来实现。

事实上，sass插件文档告诉我可以将postcss插件添加到选项中，但我不确定如何确切地实现这一点。我已经单独添加了gatsby-plugin-postcss插件，现在正在尝试将其与sass插件集成。

这种方法行不通： gatsby-config.js：

    // SASS support with PostCSS support:
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: ['gatsby-plugin-postcss'],
      },
    },

我想我应该用不同的方式称呼它，但是我找不到任何关于这个的文档？

- Albert Skibinski

Answer 1

gatsby-plugin-postcss 使用特定的 postcss 插件（例如 postcss-preset-env）来处理 CSS 代码，本身不是一个 postcss 插件，因此您不能在 postCssPlugins 选项中使用它。

对于 Gastby 处理 SASS 文件的管道是 sass -> postcss 插件 -> 最终结果，因此只需使用 SASS 插件并在其选项 postCssPlugins 中选择 postcss 即可。

{
  resolve: `gatsby-plugin-sass`,
  options: {
    postCssPlugins: [
      require(`postcss-preset-env`)({
        stage: 2,
        features: {
          "nesting-rules": true,
        },
      }),
    ],
    precision: 6,
  },
},

- elprup

---

谢谢，这其实很显然 :) - Albert Skibinski