11ty项目Sass缩进语法报错及SCSS编译异常问题求助

问题1：缩进语法.sass文件编译报错"expected ;" #

原因：sass.compileString()默认以SCSS语法解析文件，而你的.sass使用的是缩进语法，需显式指定语法类型。

修改.eleventy.js中的编译配置，在sass.compileString的选项中添加语法指定：

let result = sass.compileString(inputContent, {
  loadPaths: [parsed.dir || "."],
  sourceMap: false,
  syntax: sass.Syntax.Indented // 指定使用缩进语法解析
});

问题2：切换SCSS后无CSS文件生成 + MIME类型错误 #

子问题2.1：无CSS文件生成 #

你的.eleventy.js返回配置中，templateFormats未包含sass/scss，导致11ty不会处理这类文件。需将对应格式添加到列表中：

return {
    dir: {
        input: "src",
        includes: "_includes",
        output: "_site"
    },
    templateFormats: ["html", "md", "njk", "sass"], // 加入sass/scss格式
    htmlTemplateEngine: "njk",
    markdownTemplateEngine: "njk",
    dataTemplateEngine: "njk"
}

子问题2.2：MIME类型错误 #

该错误是因为请求main.js时返回了HTML（404页面），说明11ty未将src/assets/scripts下的文件复制到输出目录。添加静态资源复制配置：
在.eleventy.js的module.exports函数中加入：

// 复制scripts目录到输出目录
eleventyConfig.addPassthroughCopy("src/assets/scripts");
// 若需要统一复制所有静态资源，可替换为：
// eleventyConfig.addPassthroughCopy("src/assets");

额外注意事项 #

确认你安装的是官方维护的sass包而非已废弃的node-sass：

npm uninstall node-sass
npm install sass

修改完成后重启npm start，检查_site目录下是否生成了对应CSS文件，同时确认HTML中引用CSS/JS的路径与输出目录结构一致。

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