README

这是一个适用于 SASS、Bower、Gulp 和您想使用的任何 Drupal 8 基础主题的 Drupal 8 主题模板。此模板还内置了自更新功能，您在未来为 Drupal 项目设置自定义主题时，无需复制/粘贴任何内容。

用法

基本安装

默认情况下，此模板使用 Bartik 作为基础主题，您可以通过在现有 Drupal 项目中调用以下命令开始使用它：

composer require lakedrops/theme-d8-sass

这将在此模板作为依赖项添加到您的 composer.json 文件中，并创建一个名为 mytheme 的自定义主题，包含所有必要的设置，以便立即开始。

高级安装

定义主题名称

要定义特定的主题名称，您只需将以下部分添加到您的 '.lakedrops.yml' 中

theme-d8-sass:
  project_name: NAME_YOUR_THEME

在实际安装主题之前将此配置添加到 composer.json 中是最佳实践，否则您将最终得到两个自定义主题，一个具有默认名称，另一个具有您自己的主题名称。

定义和配置基础主题

要使用 Bartik 之外的其他基础主题，您可以将以下配置添加到您的 composer.json 中

theme-d8-sass:
  base_theme:
    name: bootstrap
    package: drupal/bootstrap
    starterkit: starterkits/sass
    sasspath: scss
    import:
      - overrides

注意：如果您使用 Bootstrap 作为基础主题，您还必须添加 Bootstrap 库的 bower 资产，具体说明如下。其他基础主题可能也适用，您应该在其自己的文档中查找其要求。请随时通知我们有关其他基础主题的配置，我们将将其添加到此处文档中。

添加 bower 资产

基础主题或您自己的主题开发样式可能需要一些由 Bower 提供的库。要将一个或多个 Bower 资产添加到您的主题中，只需将类似以下部分添加到您的 composer.json 中

theme-d8-sass:
  bower_assets:
    bootstrap-sass:
      name: bootstrap
      version: "~3.3.7"
      fonts:
        src: assets/fonts/bootstrap
      sass:
        src: assets/stylesheets
        import:
          - bootstrap
      js:
        src: assets/javascripts

在上面的示例中，bootstrap-sass 来自 bower 包存储库的包名称，并包含一个包含以下选项的值字典

当执行 composer 时，会动态创建 bower.json 文件，并自动执行 bower 以在您的主题中本地安装和更新所有所需的资源。

全局添加 bower 资源

上一章介绍了如何将 bower 资源添加到您的自定义主题，并且无需做任何其他事情，它们将使用 bower 安装和更新后本地添加到您的主题中。

如果您想避免使用 Bower 的开销，或者这些资源将被多个项目使用，那么您可以将它们全局安装到 Drupal 项目的 vendor 目录中。这可以通过在 composer.json 中添加以下设置来实现，除了上一章中的设置

{
  "repositories": [
    {
      "type": "composer",
      "url": "https://asset-packagist.org"
    }
  ],
  "require": {
    "bower-asset/bootstrap-sass": "~3.3.7"
  }
}

您的自定义主题将直接使用 vendor 目录中的资源，而不是将它们保留在主题的 bower_components 子目录中。但是，您仍然需要如上所述在额外部分中保留 bower_assets 设置。

其他 Bower 资源

一个可能添加到主题中的 bower 资源简短列表

Flat-UI

{
  "require": {
    "bower-asset/flat-ui-sass": "~2.1.3"
  }
}

theme-d8-sass:
  bower_assets:
    flat-ui-sass:
      name: flat-ui
      fonts:
        src: vendor/assets/fonts.flat-ui
      sass:
        src: vendor/assets/stylesheets
        import:
          - flat-ui
      js:
        src: vendor/assets/javascripts

FontAwesome

{
  "require": {
    "bower-asset/fontawesome": "~4.7.0"
  }
}

theme-d8-sass:
  bower_assets:
    fontawesome:
      name: fontawesome
      fonts:
        src: fonts
      sass:
        src: scss
        import:
          - font-awesome

Animate

{
  "require": {
    "bower-asset/animate-sass": "~0.6.0"
  }
}

theme-d8-sass:
  bower_assets:
    animate-sass:
      name: animate
      sass:
        src: ''
        import:
          - animate
        modules:
          - bounceIn

对于 animate 包，还有一个名为 modules 的附加列表，其中包含您想要为自定义主题启用的动画模块列表。

添加可选脚本

每次您在项目中运行 composer install 或 composer update 时，自定义主题都会更新。然而，有时您可能只想更新主题而无需在完整项目中运行 composer，您可以通过向 composer.json 文件中添加一些自定义脚本来实现这一点

{
  "scripts": {
    "drupal-theme-install": "LakeDrops\\Drupal8Theme\\SASS\\Plugin::init",
    "drupal-theme-update": "LakeDrops\\Drupal8Theme\\SASS\\Plugin::update",
    "drupal-theme-reset": "LakeDrops\\Drupal8Theme\\SASS\\Plugin::reset",
    "drupal-theme-overwrite": "LakeDrops\\Drupal8Theme\\SASS\\Plugin::overwrite"
  }
}

您不需要全部都添加，只需添加那些对您的开发工作流程有意义的即可。要运行这些脚本中的任何一个，只需调用 composer drupal-theme-update，然后它会运行那个脚本。

此包中可用的脚本有

更新

只需在项目根目录中调用 composer update，此插件的最新版本将被更新，然后更改的文件将更新到您的自定义主题中。不用担心，您在主题中编辑的文件以及不是此插件核心的文件，将不会被覆盖，因此您可以轻松地保留自己的工作。

更新结束后，将执行 gulp default，这将更新您的字体、JavaScript 文件并将 Sass 文件编译成 CSS。这对于部署 Drupal 站点很有用，可以确保主题资源始终保持最新。

Sass 编译器还知道开发和生产模式。默认情况下使用开发模式，当使用带有 --no-dev 命令行参数的 composer 运行时，将使用生产模式，这在生产环境中通常是情况。

使用 Gulp

转到您的主题目录并调用一次 gulp 以运行所有可用的预处理器。这相当于调用 gulp default。

如果 Gulp 没有全局安装，那么您需要在本章的所有示例中调用 node_modules/.bin/gulp。

Gulp 默认将运行 fonts、js 和 css 任务，这些任务将在下面详细介绍。

Gulp 任务

字体

gulp fonts 将从所有配置的 bower 资源中复制所有字体到您自定义主题的字体子目录。

JavaScript

gulp js 将从所有配置的 bower 资源中复制所有 JavaScript 文件到您自定义主题的 js 子目录。

CSS

gulp css 一次将您的 Sass 文件编译成 CSS。当添加参数 --env production 时，输出将针对生产环境进行优化，否则输出将针对开发进行优化。

gulp watch 将启动一个进程，监视您的 Sass 目录，并在一个或多个文件更改时自动调用 CSS 编译。

示例

此模板嵌入在我们的 D8 项目模板 中，查看 composer.json 将显示所有选项的实际操作。