使用库在 Drupal 8 中添加和管理样式表 (CSS) 文件的标准方法是什么？

Question

在为 Drupal 开发模块或主题时，不可避免地需要为我们的项目包含外部 CSS 或 Javascript 插件或库。

Drupal assets management 有点复杂，让我很困惑，我读了
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme and
Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module，
但是没有解释清楚，还有一些问题还.

如何将这些库和样式表添加到网页中？它们是按照 SMACSS 类别（基础、布局、组件、状态、主题）的顺序添加的吗？
例如考虑以下结构：
ThemeName.libraries.yml

library-A:
  css:
    # The SMACSS category.
    base:
      # The path to the css file.
      assets/css/stylesheets-1.css: {}
    theme:
      assets/css/stylesheets-2.css: {}

library-B:
  css:
    base:
      # The path to the css file.
      assets/css/stylesheets-3.css: {}
    theme:
      assets/css/stylesheets-4.css {}

在库-A 或 B（单独）：我应该如何定义类别？首先应该是 Theme 然后是 base 还是相反？什么是标准？

完全在库-A 和 B 中：首先加载？库-A 还是 B？哪个是正确的？

Answer 1

对于 1：更多信息 here，基本上主题会覆盖基础，尽管权重是倒置的；现在这是一个指导方针而不是规则所以它真的取决于你在写什么

对于 2：这实际上取决于您加载它们的位置和方式，

ex 加载库它倒序：

在主题中

图书馆：
- 'mytheme/library-B' //用“-”替换项目符号
- 'mytheme/library-A' //用“-”替换项目符号
在模板中

{{ attach_library('mytheme/library-B') }} {{ attach_library('mytheme/library-A') }}
在模块中

$types['element']['#attached']['library'][] = 'mytheme/library-B'; $types['element']['#attached']['library'][] = 'mytheme/library-A';

使用库在 Drupal 8 中添加和管理样式表 (CSS) 文件的标准方法是什么？

What is standard approach to add and manage stylesheets (CSS) files in Drupal 8 with Libraries?

drupal-8

theming

lib