让我的 Netlify 构建运行 Sass

假设您想使用 Eleventy 作为生成器来构建一个网站。如今流行的选择！Eleventy 没有特别好的方法来预处理您的 CSS，如果您想这样做的话。有多种方法可以做到，也许这种自由是 Eleventy 精神的一部分。

我看到人们为此设置了 Gulp，这很酷，我仍然使用并喜欢 Gulp 来做一些事情。我看到有人使用 模板 来 返回预处理的 CSS，这似乎很奇怪，但嘿，任何有效的方法都可以。我甚至看到有人 扩展 Eleventy 配置 本身来运行处理。

到目前为止，对我来说最有意义的是 使用 npm 脚本 来进行 Sass 处理。先进行 CSS 处理，然后进行 HTML 处理，使用 npm-run-all。所以，您将在 package.json 中设置类似以下内容

  "scripts": {
    "build": "npm-run-all build:css build:html",
    "build:css": "node-sass src/site/_includes/css/main.scss > src/site/css/main.css",
    "build:html": "eleventy",
    "watch": "npm-run-all --parallel watch:css watch:html",
    "watch:css": "node-sass --watch src/site/_includes/css/main.scss > src/site/css/main.css",
    "watch:html": "eleventy --serve --port=8181",
    "start": "npm run watch"
  },

我认为这相当不错。由于 Eleventy 本身没有一个优良的 CSS 处理路线，因此将其与 Eleventy 处理分离似乎是可以接受的。

但我看到 Netlify 的 构建插件 发展得很好。正如 Sarah 所说

构建插件所做的就是让您在该过程中的关键时间点访问，例如 onPreBuild、onPostBuild、onSuccess 等等。您可以在这些特定时间点执行一些逻辑

这种结构确实非常直观且不错。许多构建插件是由社区或 Netlify 本身创建的。您只需通过 UI 点击它们或在您的配置中引用它们。但 Sass 不是内置项目（在我写这篇文章的时候），我猜想这是因为人们对 CSS 的处理方式/位置/方法有自己的想法，所以让大家自己做是有道理的。所以让我们来做吧。

在我们的项目中，我们将为我们的插件创建一个目录，然后为我们想要编写的这个特定插件创建一个文件夹

project-root/
  src/
  whatever/
  plugins/
    sass/
      index.js
      manifest.yml

该 index.js 文件是我们编写代码的地方，我们特别想在这里使用 onPreBuild 钩子，因为我们希望 Sass 在构建过程运行 Eleventy 以及 Eleventy 移动文件之前完成预处理。

module.exports = {
  onPreBuild: async ({ utils: { run } }) => {
    await run.command(
      "node-sass src/site/_includes/css/main.scss src/site/css/main.css"
    );
  },
};

这里展示了所有相关文件的概览

现在，如果我从命令行运行 netlify build，它将运行与 Netlify 本身相同的构建过程，并将钩入我的插件并运行它！

我注意到的一件小事是，我试图让我的配置为（较新的）netlify.yml 格式，但插件不起作用，我不得不重新做配置为 netlify.toml 格式。

因此，我们通过这种特定的处理将自己从 Eleventy 分离，并将自己耦合到 Netlify。只是需要注意的一点。我赞成这种配置构建的方式，因为它非常不错，并且我认为它潜力巨大。

我更喜欢这种方式的更明确且拆分的配置。看看 package.json 清洁了多少

我仍然有这个想法…

…要构建一个网站，它是一个狗食的例子，展示了您在构建过程中可以/应该做的一切。我 在这里启动了该网站（以及仓库），但它还没有做太多事情。我认为通过构建插件将列表中的所有内容（以及更多？）连接起来会很酷。

如果您想贡献，请随时告诉我。也许可以给我发电子邮件或提出一个问题来讨论您想做什么。您也可以自由地进行拉取请求，但没有事先沟通的拉取请求有时会有点棘手，因为在您投入大量精力之前，很难确保我们的愿景一致。