Drupal CSS 文件行为

Drupal CSS files behaviour

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

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

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

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 来自站点目录?

从技术上讲,您的站点将始终从以下路径读取 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 文件夹编译触发部署。