フロントページのみにCSSファイルを追加するにはどうすればよいですか？

CSSファイルをフロントページに追加しようとしています。Drupal 8テーマへのスタイルシート（CSS）とJavaScript（JS）の追加を見てきました。フロントページのHOOKマシン名を知っているだけです。

function THEMENAME_preprocess_HOOK(&$variables) {
  $variables['#attached']['library'][] = 'CSSPATH';
}

Drupalがフロントページでのみ呼び出すようにするには、プリプロセス関数にどの名前を使用すればよいですか？

このチュートリアルの「Drupal 8テーマの基礎、パート1」のトピック「特定のページへのライブラリの追加」で、必要なものを正確に見つけることができます。

実際の例を示すために、簡単に変更できるように、Bartikテーマで説明します。

cssfile.cssパスの下にcssファイルを作成しましたcss/cssfile.css。これで、このCSSファイルをフロントページだけで使用したいと思います。

• ステップ1：ライブラリをテーマに追加する：次のコードをbartik.libraries.yml

  css-filling: 
    css:
      theme:
        css/cssfile.css: {}

  注：ここでは、css-fillingこのライブラリに名前を付けていますが、他の名前を付けることもできます。この名前をパスで使用します
  

• ステップ2：bartik.theme上記の特定のライブラリ（最終的にはcss）にコードを設定すると、フロントページにのみ追加されます。

  function bartik_preprocess_page(&$variables) {
    if ($variables['is_front']) {
      $variables['#attached']['library'][] = 'bartik/css-filling';
    }
  }

  注：今すぐ上記のコードで重要なことは、パスで、bartik一部は形成くるthemenameとcss-fillingステップ-1から来ています。

このコードはテストサイトでテストしたもので、フロントページでのみ機能します。

ライブラリはテンプレートに添付できhtml.html.twigます。たとえば、パスを条件としてライブラリを添付するのに理想的な場所です。たとえば、テンプレートの提案、html--front.html.twigまたは小枝式を使用できます。

他の答えは前処理を中心に展開しますが、前処理は抽象化であり、テーマの開発をより不透明にします。つまり、重要な情報をPHP関数に埋め込むのではなく、テンプレートで明確にする必要があります。

前処理が悪いと言っているのではありません。それは、作業の仕方や、テーマの不透明度/抽象度に大きく依存していることだけです。

最初のページのみのライブラリを添付するにはhtml.html.twig、not演算子とroot_path変数を条件として使用できます。

{{ not root_path ? attach_library('my_theme/my_library') }}

テンプレートの提案を作成する場合は、html--front.html.twig無条件にライブラリをアタッチできます。

{{ attach_library('my_theme/my_library') }}

libraries.yml最初にライブラリとして必要なCSSを作成したことを確認してください。次に、次のhook_preprocess_page()ように使用する必要があります。

/**
 * Implements hook_preprocess_HOOK() for page templates.
 */
function THEMENAME_preprocess_page(&$variables) {
  // Add page preprocess functions here.
  if ($variables['is_front'] == TRUE) {
    // Attach your css 
    // - replace "theme_name" with the name of your theme
    // - replace "library_name" with the name of what you called 
    //   this particular css library in libraries.yml
    $variables['#attached']['library'][] = 'theme_name/library_name'
  }
}

page--front.html.twigファイルを作成し、代わりにlibraries.ymlファイル経由で添付する方がよい場合があります。これは、Drupal 8で推奨されるアプローチです。