Drupal CSS 文件行为

Question

我们必须维护一个由另一个机构使用 drupal 8 构建的页面。现在我们在他们的资产管理方面面临一些奇怪的问题，尤其是 css 文件：

比方说，我们有一个名为“my_theme”的主题模块。现在，当查看源代码时，您可以看到很多 CSS 和两个 CSS 文件，linked 到：

/themes/custom/my_theme/css/drupal.css?qeyhny
/themes/custom/my_theme/css/style.css?qeyhny

查看生产源代码似乎完全不同：我们只剩下两个 css 文件，文件夹不再是“/themes/custom/my_theme”：

/sites/default/files/css/css_VKKggqUAg-CIbtiO65y1CJC-n5vszoMBBV-yp7EeBIM.css
/sites/default/files/css/css_0AY-LeGpCop5parFpvUGlHf9WBkxLfeAkxrh6YVVQb8.css

AdvAgg 模块未激活。

主题信息文件如下：

name: my theme
type: theme
engine: mytwig
description: 'My bootstrap based theme'
package: My
core: 8.x
libraries:
  - my_theme/global-styling
ckeditor_stylesheets:
  - css/style.css
regions:
  sidebar_first: 'Left sidebar'
  sidebar_second: 'Right sidebar'
  content: 'Content'
  header: 'Header'
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  logo: 'Logo'
  footer: 'Footer'
  footer_copyright: 'Footer copyright'
  highlighted: 'Highlighted'
  help: 'Help'
  breadcrumb: 'Breadcrumb'

我的主题全球风格：

global-styling:
  css:
    theme:
      css/drupal.css: {}
      css/style.css: {}
  js:
    js/vendor/bootstrap4/bootstrap.bundle.js: {}
    js/vendor/jquery.mousewheel.js: {}
    js/vendor/jquery-ui-1.12.1.custom/jquery-ui.js: {}
    js/vendor/jquery.ui.touch-punch.js: {}
    js/modules/common.bundle.js: {}
    js/modules/Swapbackground.bundle.js: {}
    js/modules/LazyLoad.bundle.js: {}
    js/modules/Fancyboxes.bundle.js: {}
    js/modules/Collapses.bundle.js: {}
    js/modules/HeroSlider.bundle.js: {}
    js/modules/Menu.bundle.js: {}
    js/modules/Sliders.bundle.js: {}
    js/modules/SwitchLang.bundle.js: {}
  dependencies:
  - core/jquery
  - core/jquery.ui
  - core/jquery.ui.draggable
  - core/drupal

为了解决部署问题，我只想知道，这是如何实现的。有人可以给我提示吗？ Drupal link 何时直接来自我的主题，何时 link 来自站点目录？

Answer 1

从技术上讲，您的站点将始终从以下路径读取 CSS：

/themes/custom/my_theme/css/style.css
/themes/custom/my_theme/css/drupal.css

与您 my_theme.libraries.yml 上的配置一致。您看到的文件有 Drupal 生成的缓存，可以为用户更快地加载 CSS。当您清除系统缓存时，这些文件将被删除并重新创建。

我建议您将以下内容添加到您的 .gitignore 文件中：

/sites/default/files
/themes/custom/my_theme/css/drupal.css?*
/themes/custom/my_theme/css/style.css?*

此外，对于以后有关 Drupal 主题方面的参考，以下 link 将使您更好地理解它是如何定义的。我通常在我的 drupal 项目上实现的是在站点上配置 Sass/Less 并且我忽略了 css 文件夹，因为我们已经设置了一个自动部署系统，每次都会从 sass/less 文件夹编译触发部署。

Drupal CSS 文件行为

Drupal CSS files behaviour

drupal-themes

drupal-8