0

We have the following setup for two libraries: mylibrary1 and mylibrary2. Additionally we have Aggregate CSS Files = true under /admin/config/development/performance. Due to Aggregate CSS Files setting, we end with several CSS files that are aggregated together (e.g. sites/default/files/css/css_somejibbery.css?jibberish). There is a global-library that is a dependency for each library.

mytheme.libraries.yml

global-library:
  version: 1.0
  css:
    component:
      css/global.min.css: {}

mylibrary1:
  version: 1.0
  css:
    component:
      css/library1.min.css: {}
  dependencies:
    - mytheme/global-library

mylibrary2"
  version: 1.0
  css:
    component:
      css/library2.min.css: { preprocess: false }
  dependencies:
    - mytheme/global-library

mymodule.module

function mymodule_preprocess_node(&$variables) {
  $node_bundle = $variables['node']->bundle();  
  if($node_bundle == 'article'){
    $variables['#attached']['library'][] =  'mytheme/mylibrary1';
    $variables['#attached']['library'][] =  'mytheme/mylibrary2';
  }
}

Is this the expected results on the article pages?

  1. mylibrary1 would be aggregated along with global-library, but due to dependency, mylibrary1 would be loaded after global-library
  2. mylibrary2 would not be aggregated, but it would be included after the aggregated css files that contain global-library
  3. if the bundle is not article then the aggregated files would not include mylibrary1 and mylibrary2 would not be added at all.

Sample outcome:

<link rel="stylesheet" href="some/path/css_1LQ.css?pzexi" media="all"> <!-- this contains global-library and mylibrary1 --> 
<link rel="stylesheet" href="css/library2.min.css" media="all"> <!-- this contains just mylibrary2 but is loaded after css_1LQ.css -->

Your Answer

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

Browse other questions tagged or ask your own question.