How do I add CSS files only to the front page? I am trying to add a CSS file to the front page. I have seen Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme; I just need to know the HOOK machine name for the front page.

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


What name should I use for the preprocess function, in order to make Drupal calls it only for the front page?
You can find exactly what you want under the topic Adding Libraries to Specific Pages at this tutorial Drupal 8 Theming Fundamentals, Part 1

To give you a real example, I am going to explain with the Bartik theme, so you can change easily.

I have created a css file cssfile.css under the path css/cssfile.css. Now this CSS file I want to use on only front page.


Step 1: Add the library to the theme: Add the following code in the bartik.libraries.yml

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


Note: Here I have given the name css-filling to this library but you can give any other name. We will use this name in path
Step 2: Setting the code in bartik.theme so above perticular library(ultimately css) will only be added to front-page, 

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


Note: Now in the above code the important thing is path, bartik part comes form the themename and css-filling comes from the step-1.


This code I have tested in my test site and it is working on front-page only.