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

Question

我有一个 Gatsby 站点 sass 使用 gatsby-plugin-sass 插件支持。这行得通，但现在我想添加 PostCSS 支持。

根据 warning on this page（已弃用的插件），现在应该可以通过在 postCssPlugins 选项中定义 postcss 插件来实现。

的确，sass plugin documentation 告诉我可以在选项中添加一个 postcss 插件，但我不清楚具体如何操作。我已经单独添加了 gatsby-plugin-postcss 插件，现在正尝试将其与 sass 插件集成。

这不起作用：

盖茨比-config.js:

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

我想我应该用不同的方式来称呼它，但我找不到任何相关文档？

Answer 1

gatsby-plugin-postcss使用特定的postcss插件（例如postcss-preset-env）来处理css代码，本身不是postcss插件，所以你不能在postCssPlugins选项中使用它。

而 gastby 处理 sass 文件的管道是 sass -> postcss plugin -> final result，所以只需使用 sass 插件并在其选项中选择 postcss postCssPlugins.

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

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

Howto add PostCSS plugin to the Gatsby SASS plugin

sass

postcss

gatsby