Netlifyビルドを実行するSASSを作成します

Netlifyビルドプラグインを使用して、EleventyプロジェクトでSASSを前処理する

人気のある静的サイトジェネレーターであるEleventyでWebサイトを構築しているとしましょう。 Eleventyには、CSSを前処理するための組み込みの方法はありません。柔軟性を提供しますが、別のソリューションが必要です。 Gulp、テンプレートのトリック、または拡張のような方法は、SASS処理にNPMスクリプトを使用してクリーンなアプローチを提供します。

以前は、 npm-run-allを使用してSASSコンピレーションを実行する前に使用する一般的な方法：

 「スクリプト」：{
    「ビルド」： "NPM-Run-All Build：CSS Build：HTML"、
    「ビルド：CSS」：「ノードサスSRC/SITE/_INCLUDES/CSS/MAIN.SCSS> SRC/SITE/CSS/MAIN.CSS "、
    「ビルド：HTML」：「Eleventy」、
    // ...その他のスクリプト
  }、

ただし、Netlifyのビルドプラグインは、より統合されたソリューションを提供します。これらのプラグインを使用すると、Netlifyビルドプロセスの特定のポイントでコードを実行できます（たとえば、 onPreBuild 、 onPostBuild 、 onSuccess ）。 SASSは組み込みのプラグインではありませんが、カスタムのプラグインを作成すると、合理化されたワークフローがあります。

Netlifyプラグインを介してSASSの前処理を追加するには、プロジェクトにpluginsディレクトリを作成します。

 <code>project-root/ src/ whatever/ plugins/ sass/ index.js manifest.yml</code>

index.jsは、 onPreBuildフックを使用してSASSを実行して、HTMLをプロセスする前にSASSを実行するプラグインのロジックが含まれています。

 module.exports = {
  onprebuild：async（{utils：{run}}）=> {
    run.commandを待っています（
      「ノードサスSRC/SITE/_INCLUDES/CSS/MAIN.SCSS SRC/SITE/CSS/MAIN.CSS」
    ）;
  }、
};

これにより、SASS ProcessingがEleventyから切り離され、Netlifyビルドに直接統合されます。プラグインの互換性には、 netlify.ymlの代わりにnetlify.toml使用することに注意してください。

このアプローチの結果、クリーンなpackage.jsonが発生し、明示的なビルドスクリプト依存関係が削除されます。この例は、Netlifyビルドプラグインのパワーとエレガンスを紹介し、さまざまなビルドタイムタスクの可能性を強調しています。著者はまた、これらのプラグインを使用して、ビルドプロセスベストプラクティスの包括的な例を実証することを目的としたプロジェクトにも言及しています。貢献は歓迎されますが、プロジェクトのビジョンを調整するために事前のコミュニケーションが奨励されています。

以上がNetlifyビルドを実行するSASSを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。