I want to load a CSS file only for the front page, and only for users who didn't log in. Both conditions should be met; in the other cases, the CSS file should not be added to the page.

How do I achieve this in a preprocess function?

  • 1
    I don't understand why people are downvoting this. It seems like a clear question as to what the user is looking for. If someone downvotes, they should include a comment to help the poster improve their post, otherwise that downvote isn't helpful at all.
    – Jaypan
    Commented Apr 9, 2020 at 17:34
  • 3
    @Jaypan – The request is valid, of course. But since the question is asking for custom code it's lacking info on previous attempts/code to fix.
    – leymannx
    Commented Apr 9, 2020 at 18:07
  • 2
    That's a good comment for the OP for future reference.
    – Jaypan
    Commented Apr 9, 2020 at 18:18
  • 1
    @Jaypan voting isn’t designed for the user posting the question, there are volumes of literature in the help center, and an entire site (meta) to cover that. Voting is quality signalling; it’s for the rest of the community. Due to the unfortunate realities of human nature, explaining votes is actually discouraged. It inevitably leads to aggressive behaviour: insults, revenge downvoting, cyber stalking, death threats - I’ve seen and received them all, and my honest advice to anyone using Stack sites is just vote and leave it
    – Clive
    Commented Apr 10, 2020 at 17:00
  • 1
    I agree if you look at it from the point of view of one person, the OP, but that’s not what we do - we look at it from the point of the view of the community, and the intention of the site in the first place. Votes, in either direction, very much do serve a positive purpose. The comments are incidental, and as I mentioned, discouraged for what history shows us are good reasons. That’s not to say I want to encourage you to leave or anything. I definitely don’t :)
    – Clive
    Commented Apr 10, 2020 at 17:09

2 Answers 2


While using a preprocess function can also solve this, here is the template file approach.

Copy template file page.html.twig and rename the copy to page--front.html.twig

Assuming you have already defined a library for your .css file.

In page--front.html.twig add

{% if not logged_in %}
    {{ attach_library('theme_name/library-name') }}
{% endif %}

There are two steps to this:

  1. Creating a library that references the CSS file
  2. Attaching that library to the front page

Let's assume your module is named example, and the css file is 'example/css/example_front_page.css`. First, the libraries file needs to be created, declaring the CSS file.


      css/example_front_page.css: {}

Read more: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

Next, you can implement hook_page_attachments to attach the library:

function example_page_attachments(array &$attachments) {

  // Check if on front page.
  if ( \Drupal::service('path.matcher')->isFrontPage() && \Drupal::currentUser()->isAnonymous()) {
    // This is the front page, so the library is attached.
    $attachments['#attached']['library'][] = 'example/front_page';

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.