3

I have a question about adding a CSS file programmatically depending on which site I visit. In Drupal 7 I could achieve this by calling the following line in the preprocess_html method in the template.php file:

function template_preprocess_html(&$vars) {

    $css_file_name = 'specific-page';
    drupal_add_css(path_to_theme() . '/css/pages/'.drupal_clean_css_identifier($css_file_name).'.css', array('group' => CSS_THEME));

}

But I can't achieve the same with Drupal 8. I tried the same like in 7 just with the new Drupal 8 way. So here are my tries in the template.theme file

use Drupal\Component\Utility\Html;

1.)

function template_page_alter(&$page) {

  $css_file_name = 'specific-page';
  $clean_alias = Html::cleanCssIdentifier($css_file_name);
  $path_to_css = drupal_get_path('theme', 'template') . '/css/pages/' . $clean_alias  . '.css';

  $page['#attached']['css'][] = $path_to_css;

}

2.)

    function template_preprocess_page(&$vars, $hook) {

      $css_file_name = 'specific-page';
      $clean_alias = Html::cleanCssIdentifier($css_file_name);
      $path_to_css = drupal_get_path('theme', 'template') . '/css/pages/' . $clean_alias  . '.css';


      $local_css = array(
        '#attached' => array(
          'css' => array(
            $path_to_css => array(
              'group' => CSS_THEME,
              'weight' => 9999),
          ),
        ),
      );

      drupal_render($local_css);

    }

Here I get the error: You are not allowed to use css in #attached

3.)

function template_page_alter(&$page) {

          $css_file_name = 'specific-page';
          $clean_alias = Html::cleanCssIdentifier($css_file_name);
          $path_to_css = drupal_get_path('theme', 'template') . '/css/pages/' . $clean_alias  . '.css';

          $vars['attached_css'] = array(
            '#attached' => array(
            'data' => $path_to_css,
            'options' => array(
             'group' => CSS_THEME
            ),
           ),
          );

}

In my template file:

{{  attached_css }}

None of my tries worked so far. I collect the information for the code from serveral tutorials and stackoverflow questions, but it looks like that many of them are very old comparing to the stable release date of Drupal 8. So maybe there are some changes which I forget.

4
  • check it drupal.org/theme-guide/8/assets Dec 9, 2015 at 13:22
  • 1
    @Adi This page explains how to embed resources in general. But it doesn't explain a programmatic way... Dec 9, 2015 at 13:34
  • 2
    You need to create a library with the CSS file. Then use the attached array to add your library. Also there is a hook specific for adding attachments.
    – Eyal
    Dec 9, 2015 at 16:24
  • Btw. You should use \Drupal::service('renderer')->renderRoot() instead of drupal_render().
    – kenorb
    Aug 4, 2017 at 21:28

1 Answer 1

0

I could solve the problem (thanks to @Eyal).

template.theme :

function template_preprocess_html(&$variables) {

    $css_file_name = 'specific-page';
    $clean_alias = Html::cleanCssIdentifier($css_file_name);

    $activeThemeName = \Drupal::theme()->getActiveTheme()->getName();

    //OR

    $activeThemeName = 'template';

    $variables['#attached']['library'][] = $activeThemeName . '/' . $clean_alias;

}

template.libraries.yml:

specific-page:
  css:
    base:
      css/pages/specific-page.css: {}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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