How do I add CSS files only to 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.