Making My Netlify Build Run Sass

Using Netlify Build Plugins to Preprocess Sass in an Eleventy Project

Let's say you're building a website with Eleventy, a popular static site generator. Eleventy doesn't have a built-in way to preprocess CSS, offering flexibility but requiring a separate solution. While methods like Gulp, templating tricks, or extending the Eleventy config exist, using npm scripts for Sass processing offers a clean approach.

Previously, a common method involved using npm-run-all to run Sass compilation before Eleventy:

  "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",
    // ... other scripts
  },

However, Netlify's build plugins provide a more integrated solution. These plugins allow executing code at specific points in the Netlify build process (e.g., onPreBuild, onPostBuild, onSuccess). While Sass isn't a built-in plugin, creating a custom one offers a streamlined workflow.

To add Sass preprocessing via a Netlify plugin, create a plugins directory in your project:

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

index.js contains the plugin's logic, using the onPreBuild hook to run Sass before Eleventy processes the HTML:

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

This decouples Sass processing from Eleventy, integrating it directly into the Netlify build. Note that using netlify.toml instead of netlify.yml might be necessary for plugin compatibility.

This approach results in a cleaner package.json, removing the explicit build script dependencies. The example showcases the power and elegance of Netlify build plugins, highlighting their potential for various build-time tasks. The author also mentions a project aiming to demonstrate a comprehensive example of build process best practices using these plugins. Contributions are welcome, but prior communication is encouraged to align project visions.

The above is the detailed content of Making My Netlify Build Run Sass. For more information, please follow other related articles on the PHP Chinese website!