Adding CSS to specific nodes doesn't work I'm new to Drupal 8 themes and am trying to edit CSS on individual pages. I've read how to do it, and have attempted to implement, but when I clear my sites cache and try to view the page, the new CSS (or JS on some pages) does not seem to get utilized.

What I have done


In my .theme file I have this code

function odyssey_preprocess_node(&amp;$variables) {
  // find node object
  $node = \Drupal::routeMatch()-&gt;getParameter('node');
  if ($node) { //ensure object is a node
    if ($node-&gt;id() == 1 ) { //grab specific node (R&amp;D page)
      //attach the library
      $variables['#attached']['library'][] = 'odyssey/research-devel';
    }
    elseif ($node-&gt;id() == 3 ) {//CR Calc node
      $variables['#attached']['library'][] = 'odyssey/cr-calc';
    }
  }
}

In my .libraries.yml file I have the following code 

research-devel:
  css:
    theme:
      css/research-devel.css: {}

cr-calc:
  css:
    theme:
      css/cr-calc.css: {}
  js:
    js/cr-calc.js: {}
  dependencies:
    - core/jquery

I uploaded the named files from .libraries.yml into the appropriate folders (I have my global CSS and JS files working, so I know the locations are correct.)


Does anyone see any glaring errors? Am I going about this the wrong way? Like I said, fairly new to the game and I'm sure that adding specific page stylings to the global CSS is the "Non-Drupal" way to go about it, so any advice would be appreciated.
See if the hook is being called or not.
Try printing some of the node variables inside the hook.
Also try adding the libraries based on path alias which is configurable anytime unlike nids which differ based on the instances.
If you are to follow path approach,

function themename_preprocess_page(&amp;$variables) {

   /*Get Url based on the url alias of current path */
    $current_path = \Drupal::service('path.current')-&gt;getPath();
    $Url = \Drupal::service('path.alias_manager')-&gt;getAliasByPath($current_path);
    /*Attached calendar script for this page alone */
   if($Url =="/contact/open-office-hour"){
     $variables['#attached']['library'][] = 'themename/calendar';
   }
}