如何在Eleventy中排除文件或文件夹，避免生成多余CSS？

你当前的配置会把所有.scss文件都作为模板编译输出，这就是components下的SCSS被单独转成CSS的原因。可以通过以下两种方法解决：

方法一：仅编译指定的入口SCSS文件 #

修改.eleventy.js中的SCSS扩展配置，在编译逻辑里判断文件路径，只处理site.scss，忽略其他SCSS文件：

const sass = require("sass");
const path = require("node:path");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/img");
  eleventyConfig.addPassthroughCopy("src/js");

  eleventyConfig.addTemplateFormats("scss");
  eleventyConfig.addExtension("scss", {
    outputFileExtension: "css",
    compile: function (inputContent, inputPath) {
      // 只处理入口文件site.scss，跳过components下的组件文件
      if (!inputPath.includes("styles/site.scss")) {
        return;
      }

      let parsedPath = path.parse(inputPath);
      let result = sass.compileString(inputContent, {
        loadPaths: [parsedPath.dir || ".", this.config.dir.includes],
      });

      return () => result.css;
    },
  });

  return {
    dir: {
      input: "src",
    },
  };
};

方法二：忽略components目录下的SCSS文件 #

通过ignores配置让Eleventy完全不处理components目录里的SCSS文件，这样它们就不会被编译或复制：

const sass = require("sass");
const path = require("node:path");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/img");
  eleventyConfig.addPassthroughCopy("src/js");

  // 忽略components目录下的所有SCSS文件
  eleventyConfig.ignores.add("styles/components/*.scss");

  eleventyConfig.addTemplateFormats("scss");
  eleventyConfig.addExtension("scss", {
    outputFileExtension: "css",
    compile: function (inputContent, inputPath) {
      let parsedPath = path.parse(inputPath);
      let result = sass.compileString(inputContent, {
        loadPaths: [parsedPath.dir || ".", this.config.dir.includes],
      });

      return () => result.css;
    },
  });

  return {
    dir: {
      input: "src",
    },
  };
};

两种方法都能达到只生成site.css的效果，推荐第一种，更精准控制编译的文件范围。

内容的提问来源于stack exchange，提问作者Chris Barr