0

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

  1. 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';
        }
      }
    }
    
  2. 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
    
  3. 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 Nov 3 '17 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 Nov 3 '17 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 Nov 6 '17 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 Nov 7 '17 at 20:08
0

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';
   }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.