gatsby - gatsby プロジェクトで .less をセットアップするにはどうすればよいですか?

Question

私は gatsby-plugin-less プラグインを使用していますが、実際の方向性はなく、プラグ アンド プレイではないようです。

Answer 1

gatsby-config.jsルート フォルダー内のファイルにプラグインを追加して、プラグインを「アクティブ化」する必要があります。次に、less ファイルを layout/index.js` にインポートするだけです。

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

PostCSS も含まれており、自動接頭辞や一般的なクロスブラウザー フレックスボックスのバグなど、いくつかのデフォルトの最適化を処理します。通常は考える必要はありませんが、Less 出力に後処理を追加したい場合は、プラグイン オプションでプラグインを指定できます。

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