-5

Here is an example of my *.info file.

enter image description here

enter image description here

Why the page cannot load the CSS that I add myself?

0

3 Answers 3

6

You Need to create a separate *.libraries.yml and declare it in your theme's *.info.yml file.

Note:

If your theme is named "smart", then the file name should be smart.libraries.yml

Attaching to all pages:

To attach a library to all the pages on the site that use your theme, declare it in your theme's *.info.yml file.

name: smart
type: theme
core: 8.x
libraries:
  - smart/cuddly-slider

Defining a library

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
1
  • 1
    How about if i want to resuse a css or js , suppose i have cuddly-slider.css in another module and do i need to include same in the current module's css folder ?
    – KTM
    Commented Aug 16, 2016 at 14:20
3

In Drupal 8, you need to define a "library" to add your custom CSS/JS

The general steps for loading assets (CSS/JS) are:

  1. Save the CSS or JS to a file.
  2. Define a "library", which can contain both CSS and JS files.
  3. "Attach" the library to a render array in a hook.

But in the case of themes, there is an alternative to step 3: themes can choose to load any number of asset libraries on all pages.

More details in the online documentation here: https://www.drupal.org/theme-guide/8/assets

0

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module

In Drupal 8, stylesheets (CSS) and JavaScript (JS) are loaded through the same system for modules (code) and themes, for everything: asset libraries. Asset libraries can contain one or more CSS assets, one or more JS assets and one or more JS settings.

Defining a library

To define one or more (asset) libraries, add a *.libraries.yml file to your module folder. (If your module is named fluffiness, then the file name should be fluffiness.libraries.yml). Each "library" in the file is an entry detailing CSS and JS files (assets), like this:

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

In other words you need to create a library.

1
  • The OP is showing the .info.yml file of a theme, not a module.
    – apaderno
    Commented Mar 30, 2016 at 5:09

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.