logo

额外区块类型 (EBT) - 全新的布局构建器体验❗

额外区块类型 (EBT) - 样式化、可定制的区块类型:幻灯片、标签页、卡片、手风琴等更多类型。内置背景、DOM Box、JavaScript 插件的设置。立即体验布局构建的未来。

演示 EBT 模块 下载 EBT 模块

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

额外段落类型 (EPT) - 类似的基于 Paragraph 的模块集合。

演示 EPT 模块 滚动

滚动

7.2. 基于 Bootstrap 创建主题,并通过 Gulp 编译 SASS。

17/10/2025, by Ivan

在上一节课中,我们学习了如何使用 PhpStorm 内置的监视器编译 LESS。在本教程中,我们将创建一个基于 SASS Bootstrap 的主题。如果您在使用 LESS 和 PhpStorm 编译时遇到困难,可以尝试使用 GulpSASS。在当前阶段,使用 LESS 还是 SASS 都可以,但我建议您使用 SASS 与 Gulp,因为编译速度更快、配置更简单。

Gulp 是一个基于 JavaScript 的任务管理器。我们将用它来实现两个任务:一个用于监控 sass 文件夹的更改,另一个用于将 SASS 编译为 CSS。

让我们开始安装。首先,我已经安装好了 Drupal。现在需要下载 Bootstrap 主题,并将其放入 /themes 文件夹:

https://www.drupal.org/project/bootstrap

若要在 Bootstrap 子主题中使用 SASS,我们需要使用名为 sass 的 starter kit:

sass

将该 sass 文件夹复制到 /themes 目录,与 bootstrap 并列放置,并重命名为您的主题名称,我这里命名为 drupalbook

bootstrap

现在需要将所有文件名中的 THEMENAME 替换为您的主题名。例如,将 THEMENAME.starterkit.yml 重命名为 drupalbook.info.ymlTHEMENAME.libraries.yml 重命名为 drupalbook.libraries.yml,依此类推。不要忘记修改配置文件夹中的文件,它们也包含 THEMENAME

settings

在文件内部也可能包含 THEMENAME,例如 sass/config/schema/THEMENAME.schema.yml

themename

为了确保没有遗漏任何地方,可以在 PhpStorm 中全局搜索 THEMENAME 并替换为您的主题名:

find

输入 THEMENAME 并将其全部替换为 drupalbook

find a path

接下来,下载 Bootstrap 源文件并将其放入 /themes/drupalbook/bootstrap 文件夹:

https://getbootstrap.com/docs/4.3/getting-started/download/

https://getbootstrap.com/docs/3.3/getting-started/

我们需要的是 SASS 版本的 Bootstrap:

download

将整个 Bootstrap 文件夹放入主题中,使 assets 的路径为 /themes/drupalbook/bootstrap/assets

assets

复制完主题所需文件后,我们需要引入 Gulp 来编译 SASS。

首先,安装 Node.js

https://nodejs.org/en/

Node.js 是 JavaScript 的运行环境,它允许执行编译 SASS 到 CSS 的任务。安装过程与普通程序相同。建议下载最新版本(例如 7.x.x):

npm

安装 Node.js 后,请重启 PhpStorm 或命令行终端。您可以在 PhpStorm 中直接打开终端:

terminal

或者通过 Windows 菜单打开命令提示符:

cmd

在命令行中输入以下命令以验证 Node.js 是否安装成功:

node -v

cmd

接下来,进入我们的 drupalbook 主题目录,并安装 Gulp。使用 cd 命令进入文件夹,使用 cd .. 返回上级目录。

bootstrap

若需切换磁盘,请输入相应的盘符(例如 D:)。

openserver

进入主题文件夹后,使用 npm 安装 Gulp。npm 随 Node.js 一同安装。首先初始化 npm:

npm init

该命令将生成 package.json 文件,用于记录通过 npm 安装的所有包。执行命令时一路按 Enter 即可:

isc

生成的 package.json 文件大致如下:

{
  "name": "bootstrap-sass",
  "version": "3.3.7",
  "description": "bootstrap-sass 是基于 Sass 的 Bootstrap 3 版本。",
  "main": "assets/javascripts/bootstrap.js",
  "style": "assets/stylesheets/_bootstrap.scss",
  "sass": "assets/stylesheets/_bootstrap.scss",
  "license": "MIT"
}

然后安装 Gulp:

npm install --save-dev gulp

npm install

安装 gulp-sass 包:

npm install --save-dev gulp-sass

如果您使用的是 Gulp 4.x,请使用以下 Gulpfile.js 代码:

// Gulpfile.js
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');

var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};

function styles() {
  return gulp
    .src(paths.styles.src, { sourcemaps: true })
    .pipe(sass())
    .pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);

我们已经安装了 gulpgulp-sass,现在需要在主题根目录创建 Gulpfile.js 文件:

/themes/drupalbook/Gulpfile.js

对于上述代码,还需要安装以下库:

npm install gulp-concat
npm install gulp-uglify

我们设置 Gulp 将 SASS 编译后的 CSS 文件输出到 css 文件夹,因此需要创建该文件夹及一个 style.css 文件:

/themes/drupalbook/css/style.css

style

此文件将包含所有编译后的 CSS 内容。

现在我们可以开始编译 SASS 了。在 PhpStorm 中打开主题文件夹,右键单击 Gulpfile.js,选择 Show Gulp Tasks

themes

选择 default 任务,任务窗口将会立即打开:

default

从现在开始,每当您修改主题中的 SASS 文件,Gulp 都会自动重新编译。

css

编译完成后,CSS 内容会写入 style.css 文件中,例如背景颜色会变为黄色:

yellow

起初,使用 Gulp 设置编译环境可能看起来复杂,但如果您已经安装了 Node.js,只需创建一个 Gulpfile.js 文件并安装 gulpgulp-sass 包即可。如果您在安装或配置过程中遇到问题,可以在评论区留言。