README

创建Forty Acres子主题

复制STARTERKIT目录并将其放在与forty_acres主题相同的级别（/web/themes）。将子主题名称替换STARTERKIT名称，并在以下位置替换子主题中的STARTERKIT单词：/config/install/STARTERKIT.settings.yml package.json STARTERKIT.info.yml（文件中的名称和2个实例） STARTERKIT.theme STARTERKIT.libraries.yml

自定义子主题

自定义模板

如果您想覆盖Forty Acres主题模板，只需将其复制到新子主题的模板目录中。这些模板中的命名空间可能需要更新为新子主题的命名空间。例如，如果您将header.html.twig文件复制到新子主题中，则需要复制page.html.twig文件并使用新的主题命名空间引用包含文件。换句话说，在page.html.twig中，您将更改：{% include '@forty_acres/includes/header.html.twig' %} 为 {% include '@your_subtheme/includes/header.html.twig' %}

自定义JS

/js目录中有一个example.custom.js文件。它在libraries.yml文件中被引用。要使用它，通过删除文件名中的"example"部分来重命名它，并在libraries文件中取消注释"js"及其下的一行。有关将JS添加到子主题的更多信息，请参阅：[https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme](https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme)

自定义CSS

在子主题中添加或修改CSS有两种方法：* 在/css目录中的styles.css文件中添加CSS。这里的样式将最后读取并覆盖所有其他样式。* 创建Sass文件并编译它们。下面是使用Sass和Gulp的说明。

通常，新的Sass部分文件应放在/src/scss目录中，并导入到overrides.scss文件中以进行编译并输出到/css目录中的overrides.css文件。

使用SCSS本地环境开发的要求

开发者需要全局安装以下包。

Node
Node Package Manager (NPM)
Gulp

使用NVM设置本地环境

现在推荐使用Node Version Manager (NVM)来安装Node/NPM。NVM比Homebrew更灵活，可以避免使用Homebrew安装Node然后安装全局NPM包的情况。然而，使用NVM不是必需的，如果您愿意，可以继续使用Homebrew。如果您以前使用Homebrew安装了Node/NPM并想要删除它以及您安装的任何全局NPM包，请运行以下命令。

注意：您需要使用NVM提供的NPM重新安装您目前拥有的任何全局包。

brew uninstall node;
brew prune;
rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.d;
rm -rf ~/.npm;

现在安装NVM，请运行以下命令

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

请确保以下内容已添加到您的bash_profile

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

接下来，验证NVM是否正常工作，运行以下命令，它应该输出NVM的选项。如果没有找到，请尝试source您的bash_profile或打开一个新的终端窗口。

nvm

接下来，我们需要安装Node和NPM的稳定版本。运行以下命令安装两者

nvm install --lts

现在，您可以通过运行以下命令验证您已安装Node和NPM，它应该返回node v8.11.3和npm v5.6.0

node -v
npm -v

接下来，我们需要全局安装Gulp

npm install -g gulp

您可以使用以下命令检查已安装的全局包：

npm list -g --depth 0

现在您应该已经全局安装了Node、NPM和Gulp。您可以通过运行以下命令验证这些包的位置。这些包应都来自~/.nvm目录内部。

which node
which npm
which gulp

运行Gulp构建

现在您已经全局安装了Node、NPM和Gulp，您可以在Forty Acres中运行Gulp配置。Forty Acres包含一个package.json文件，它定义了一系列Node包，以及gulpfile.js文件，该文件包含了Gulp配置，用于执行如编译SCSS和压缩JS等任务。

从您的主题根目录运行以下命令，安装本地包，然后触发新的构建：

npm install
gulp

Gulp将运行以下任务：

• 编译SCSS
• 为CSS添加供应商前缀
• 压缩JS
• 将CSS复制到相关目录
• 合并文件

错误

如果您运行"gulp"并得到类似于'Syntax "undefined" is not supported yet...'的错误，可能是因为没有要编译的Sass部分。

您可能需要禁用任何使用"@"规则的Sass的CSS检查，通过在其上方添加注释行，如下例所示。@media screen and (min-width: #{$mq-breakpoint}) { // stylelint-disable-next-line at-rule-no-unknown @content; }