0

I am trying to attach simple css via hooks in the themes and it does not work? The code looks correct to me. It doesn't attach. What am i doing wrong?

global-styling:
  version: 8.x
  header: true
  css:
    base:
      css/main.css: 

  js:
    js/main.min.js: {}
    js/scrollreveal.js: {attributes: { defer: true} }
    src/js/vendor/picturefill/picturefill.min.js: {attributes: { defer: true} }
    js/custom.js: {attributes: { defer: true, async: true} }
    js/tp.widget.bootstrap.min.js: {attributes: { defer: true} }
    js/js.cookie.min.js: {attributes: { defer: true} }
    js/api.js: {attributes: { defer: true} }

  dependencies:
    - core/drupal
    - core/jquery

content-styling:
  css:
    base:
      css/content.css: {}

carousel-styling:
  css:
    base:
      css/carousel.css: {}

I am trying to attach css/content.css only when an entity reference to a paragraph is displayed. I am trying to attach css/carousel.css only when an certain paragraph type (slider) is displayed

function porto_sub_preprocess_field(array &$variables, $hook) {

  if(  $variables['element']['#entity_type'] == 'paragraph' ) {
     \Drupal::logger('my_module')->notice('content should be');
        // tried both these on all
        $variables['element']['#attached']['library'][] = 'porto_sub/content-styling';
        $variables['#attached']['library'][] = 'porto_sub/content-styling';
  } 
}

function porto_sub_preprocess_paragraph(&$variables) {
  $paragraph = $variables['paragraph'];
  if($paragraph->getParentEntity()->bundle()=='slider') {
    \Drupal::logger('my_module')->notice('carousel should be');
    $variables['element']['#attached']['library'][] = 'porto_sub/carousel-styling';

  }
}

Then i tried....still nothing

function porto_sub_page_attachments(array &$attachments) {
      $attachments['#attached']['library'][] = 'porto_sub/content-styling';
    $attachments['#attached']['library'][] = 'porto_sub/carousel-styling';

x }

Is there some way i can debug? I get no information regarding what's wrong here.

1

To attach a library to a certain paragraph type you could use template_preprocess_paragraph__PARAGRAPH_TYPE() like following. Note how it's just added to the $variables array not the element.

function MYTHEME_preprocess_paragraph__slider(&$variables) {
  $variables['#attached']['library'][] = 'MYTHEME/carousel-styling';
}

Same with the field. Simply use template_preprocess_field__FIELD_NAME() and attach the library directly to the $variables array.


Your content-styling and carousel-styling libraries probably should look more like following. Note how it's added as theme category, not as base. See the docs on File Structure for some info about SMACSS.

content-styling:
  css:
    theme:
      css/content.css: {}

And finally: Flush cache, flush cache and flush the cache again!!!!!!!

2
  • Hi thanks. I tried to the above code for carousel-styling using by targeting the paragraph type like suggested. This still didn't work. I made sure the library was first in the libraries list with no blank lines. I did also change base to theme. Im wondering if its the way this site is set up. Because the paragraphs are actually entity_reference_revisions therefore the hook isn't being triggered. I wonder should i be using twig {{ attach_library('porto_sub/blog-styling') }}. would this be better to attach the css in the template files for each paragraph type. At the moment all on 1css Sep 12 '19 at 12:28
  • 1
    It's ok i figured it out. The styles were not being attached due to the reference field being disabled from the display. Some custom module had custom code for rendering all the paragraphs inside a hook_page_alter... bit weird... Anyway i can attach the libraries there. Until i get a chance to enable it and make it work as drupal intended. Sep 12 '19 at 12:53

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.