Drupal CSS文件行为

编程问答 2022-11-05

问题描述

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

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

  • /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何时从我的主题直接链接，何时从站点目录链接？

解决方法

从技术上讲，您的网站将始终从以下路径读取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-8drupal-themes