使我的Netlify build run sass

使用NetLify构建插件在一个高度项目中进行预处理sass

假设您正在建立一个拥有高架静态网站生成器的网站。高度没有内置的预处理CSS，提供灵活性，但需要单独的解决方案。虽然使用NPM脚本进行SASS处理之类的方法，例如Gulp，模板技巧或扩展高度配置，提供了一种干净的方法。

以前，一种使用npm-run-all涉及的一种常见方法在高度之前运行SASS汇编：

 “脚本”：{
    “构建”：“ NPM-RUN-ALL构建：CSS构建：html”，
    “ build：css”：“ node-sass src/site/_includes/css/main.scss> src/sett/css/main.css”，
    “构建：html”：“高度”，
    // ...其他脚本
  }，，

但是，Netlify的构建插件提供了更集成的解决方案。这些插件允许在NetLify构建过程中的特定点执行代码（例如， onPreBuild ， onPostBuild ， onSuccess ）。虽然SASS不是内置插件，但创建一个自定义的插件提供了简化的工作流程。

要通过NetLify插件添加SASS预处理，请在项目中创建一个plugins目录：

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

index.js包含插件的逻辑，使用onPreBuild钩子在高度html之前运行SASS：

 Module.exports = {
  OnPrebuild：async（{utils：{run}}）=> {
    等待运行。
      “ node-sass src/site/_includes/css/main.scss src/site/css/main.css”
    ）；
  }，，
};

这将SASS的加工与高度处理，将其直接集成到Netlify构建中。请注意，对于插件兼容性，使用netlify.toml而不是netlify.yml是必需的。

这种方法会导致一个清洁package.json ，删除了明确的构建脚本依赖项。该示例展示了Netlify构建插件的功能和优雅，突出了它们进行各种构建时间任务的潜力。作者还提到了一个旨在使用这些插件来展示最佳实践的全面示例的项目。欢迎贡献，但鼓励先前的沟通使项目愿景保持一致。

以上是使我的Netlify build run sass的详细内容。更多信息请关注PHP中文网其他相关文章！