Drupal 9 基于Bootstrap 5 + SASS主题开发准备工作

如何在Drupal9中使用Bootstrap5 + SASS进行主题开发呢？有一个比较简单常用的主题module是bootstrap_sass,该模块是bootstrap_barrio的子主题，但是它聚成了SASS的环境，还是比较好用的。下来主要演示如何搭建这样一个环境。

1. 下载bootstrap_sass并创建子主题

composer require 'drupal/bootstrap_sass:^5.0'
#下载好后，进入到主题bootstrap_sass目录中
cd web/themes/contrib/bootstrap_sass
#将scripts目录下的create_subtheme.sh 文件设置成可执行
chmod +x scripts/create_subtheme.sh 
#运行脚本文件create_subtheme.sh ，创建新的子主题
./scripts/create_subtheme.sh 
#脚本运行过程中需要输入你要创建的主题机器名(比如mytheme)和主题名，按需求填写即可

2. 安装gulp以及npm相关依赖
   运行完脚本后，会在theme/custom/目录下生成一个新的主题

#进入创建好的主题目录下
cd web/themes/custom/mytheme
#安装gulp命令
npm install --global gulp-cli
#安装npm依赖包（在package.json文件中）
npm install

3. 在Drupal后台启用主题(mytheme)并设置为默认
   此时你会发现页面是没有样式的，这是因为还没有生成css文件，所有的样式还是在scss文件中，所以我们要使用gulp来把scss文件编译成浏览器能识别的css文件。
4. 运行gulp
   在主题目录下输入命令gulp,刷新浏览器，即可看到样式已被加载，如果没有任何变化，可以清除下缓存；也可以参照下面的方法配置本地环境不生成缓存：

• 回到/sites目录
  输入命令

cp example.settings.local.php default/settings.local.php

• 打开文件/default/settings.php，把以下代码取消注释

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

• 打开文件 /sites/development.services.yml并修改成以下内容

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory