Adding CSS to specific nodes doesn't work

Question

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(&$variables) {
  // find node object
  $node = \Drupal::routeMatch()->getParameter('node');
  if ($node) { //ensure object is a node
    if ($node->id() == 1 ) { //grab specific node (R&D page)
      //attach the library
      $variables['#attached']['library'][] = 'odyssey/research-devel';
    }
    elseif ($node->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.

The code is correct. Does your code reaches the point after "if ($node) {" ? Did you rebuild the cache? — hugronaphor
– hugronaphor, Commented Nov 3, 2017 at 18:16
If you want to check if $node is actually a node you can do $node instanceof NodeInterface. The second step is debugging your code to see that it is entering the if statement(s). — Kevin
– Kevin, Commented Nov 3, 2017 at 19:13
I'm pretty sure the non-Drupal way would be better, unless there are hundreds of lines of css per node and you're worried about performance.. If the node id is in the Dom, just use that for your css. I've always been under the impression that css aggregation works best with fewer files. — Niall Murphy
– Niall Murphy, Commented Nov 6, 2017 at 19:30
I'm trying to do this on a hosted server instead of a local one, so I had to seemingly clear the cache in two places. Which...seemed odd, but I managed to get it to work. Thanks @hugronaphor for the reminder to always go back and check the cache clearing step. — cwollett
– cwollett, Commented Nov 7, 2017 at 20:08

Hiei · Accepted Answer · 2017-11-09 12:56:51Z

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(&$variables) {

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

Stack Exchange Network

Adding CSS to specific nodes doesn't work

What I have done

1 Answer 1

Your Answer

Hot Network Questions

Adding CSS to specific nodes doesn't work

What I have done

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions