gatsby - 如何使用 gatsby 项目设置 .less？

Question

我正在使用 gatsby-plugin-less 插件，但没有真正的方向，它似乎不是即插即用的。

Answer 1

您需要通过将插件添加到gatsby-config.js根文件夹中的文件来“激活”插件。然后你只需在你的 layout/index.js 中导入 less 文件。

// in gatsby-config.js
plugins: [
  `gatsby-plugin-less`
]

还包含 PostCSS 以处理一些默认优化，例如自动前缀和常见的跨浏览器 flexbox 错误。通常你不需要考虑它，但如果你想在你的 Less 输出中添加额外的后处理，你可以在插件选项中指定插件。

plugins: [
  {
    resolve: `gatsby-plugin-less`,
    options: {
      postCssPlugins: [somePostCssPlugin()]
    }
  }
]