Css files of liberary can not be load

Question

I'm trying to add Zurb Foundation framework to my theme library file. However, when I add the following code to my library, the java script file load without any probleme or difficulty but css files only can not be load.

I would be grateful to hear what is the problem with the code and what is the right way to load a css of the library?

This is my theme folder structure (Zurb Foundation folder location):

|-Theme Name
|  |-includes
|  |  |-foundation
|  |  |  |-css
|  |  |  |-js

Library file:

foundation:
  version: 6.x
  css:
    includes/foundation/css/app.css: {}
    includes/foundation/css/foundation.css: {}
    includes/foundation/css/foundation.min.css: {}
  js:
    includes/foundation/js/app.js: {}
    includes/foundation/js/foundation.js: {}
    includes/foundation/js/foundation.min.js: {}
    includes/foundation/js/jquery.js: {}
    includes/foundation/js/what-input.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

[theme_name].info.yml file:

name: Theme Name
type: theme
core: 8.x
base theme: classy
libraries:
  - Theme Name/foundation
  - Theme Name/global

And finally, I uncheckmark Aggregate CSS and Aggregate JavaScript files boxes in performance, flush caches and clear my browser cache.

screenshot of Source page: As you can see the javascript files load witout any problem.

Answer 1

You can follow document

You may notice the 'theme' key for css which is not present for js. This indicates the style type the css file belongs to.

You can set CSS weights with 5 different levels of styling:

• base key assigns a weight of CSS_BASE = -200
• layout key assigns a weight of CSS_LAYOUT = -100
• component key assigns a weight of CSS_COMPONENT = 0;
• state key assigns a weight of CSS_STATE = 100
• theme key assigns a weight of CSS_THEME = 200

This is defined by the SMACSS standard. So here if you specify theme it means that the CSS file contains theme related styling which is pure look and feel. More info here. You cannot use other keys as these will cause strict warnings.

In your case you can use key theme

foundation:
  version: 6.x
  css:
    theme:
      includes/foundation/css/app.css: {}
      includes/foundation/css/foundation.css: {}
      includes/foundation/css/foundation.min.css: {}
  js:
    includes/foundation/js/app.js: {}
    includes/foundation/js/foundation.js: {}
    includes/foundation/js/foundation.min.js: {}
    includes/foundation/js/jquery.js: {}
    includes/foundation/js/what-input.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once