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

Question

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

Drupal 资产管理有点复杂，让我很困惑，我读了
将样式表 (CSS) 和 JavaScript (JS) 添加到 Drupal 8 主题 和
将样式表 (CSS) 和 JavaScript (JS) 添加到 Drupal 8 module，
但是它没有解释清楚，而且还存在一些问题。

如何处理添加到网页中的这些库和样式表？它们是按照 SMACSS 类别（基础、布局、组件、状态、主题）的顺序添加的吗？
例如，考虑以下结构：
主题名称.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：更多信息这里，基本上主题将覆盖基础，尽管权重是倒置的；现在这是指导方针而不是规则，所以这实际上取决于你在写什么

对于 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';