I have a CSS library that I need to load on a particular page because loading on unnecessary pages reduces the performance of my site. I know to load it for all pages like.

global-styling: css: theme: css/style.css: {}

But I want to know how to load this on a particular page. where to add and how to call it on the required page.
css/gall.css: {}


1 Answer 1


Here is an example in (your_custom_sub_theme.libraries.yml)

      css/my-custom.css: { weight: 220 }
      css/my-custom2.css: { weight: 221 }
      css/my-custom3.css: { weight: 222 }

    js/my-custom.js: {}
    js/my-custom2.js: {}

Do NOT change the indents.

(the weight is optional)

In your_custom_sub_theme.info.yml you need:

# Defines libraries group in which we can add css/js.
  - your_custom_sub_theme/global-styling
  • I have done all these things but it is still shoe this code on the top: global-styling: css: theme: css/style.css: {} Commented Sep 27, 2017 at 11:04
  • 1
    Maybe you could post your ...libraries.yml and ...info.yml in your question here. (Also be accurate with the indents.)
    – eye-wonder
    Commented Sep 27, 2017 at 11:18

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.