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.

  • check it drupal.org/theme-guide/8/assets – Adi Dec 9 '15 at 13:22
  • 1
    @Adi This page explains how to embed resources in general. But it doesn't explain a programmatic way... – Andreas Daoutis Dec 9 '15 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 '15 at 16:24
  • Btw. You should use \Drupal::service('renderer')->renderRoot() instead of drupal_render(). – kenorb Aug 4 '17 at 21:28
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, privacy policy and cookie policy

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