Can't use sass indent syntax on 11ty

Question

I am completely new to 11ty and I am trying to add sass to the project I have created. I have followed a tutorial and my project structure is as follows:

• src
  • assets
    • styles
      • sass
        • < folders with partials >
        • main.sass
  • index.html

In the tutorial it said to create a .eleventy.js file, to which I have added the following content:

const sass = require('sass'); // `npm install node-sass`
const path = require("path");

module.exports = function(eleventyConfig) {

    // Recognize Sass as a "template languages"
eleventyConfig.addTemplateFormats("sass");

// Compile Sass
eleventyConfig.addExtension("sass", {
  outputFileExtension: "css",
  compile: async function (inputContent, inputPath) {
    // Skip files like _fileName.scss
    let parsed = path.parse(inputPath);
    if (parsed.name.startsWith("_")) {
      return;
    }

    // Run file content through Sass
    let result = sass.compileString(inputContent, {
      loadPaths: [parsed.dir || "."],
      sourceMap: false, // or true, your choice!
    });

    // Allow included files from @use or @import to
    // trigger rebuilds when using --incremental
    this.addDependencies(inputPath, result.loadedUrls);

    return async () => {
      return result.css;
    };
  },
});
    
    return {
        dir: {
            input: "src",
            includes: "_includes",
            output: "_site"
        },
        templateFormats: ["html", "md", "njk"],
        htmlTemplateEngine: "njk",
        markdownTemplateEngine: "njk",
        dataTemplateEngine: "njk"
    }

};

With this configuration I get the following error:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering sass template ./src/assets/styles/sass/main.sass (via TemplateContentRenderError)
[11ty] 2. Having trouble compiling template ./src/assets/styles/sass/main.sass (via TemplateContentCompileError)
[11ty] 3. expected ";".
[11ty]   ╷
[11ty] 1 │ @import "utilities/fonts"
[11ty]   │                          ^
[11ty]   ╵
[11ty]   - 1:26  root stylesheet (via Error)
[11ty] 
[11ty] Original error stack trace: Error: expected ";".

I cannot understand this error. As far as I know, .sass files syntax does not include semicolons, and I copypasted the sass files I had in a vite project that worked perfectly. What should I do?

I added semicolons to the main.sass file to see if it was just a unique case of it, but it asks me to use semicolon in all the files. Also, I have reviewed the sass documentation and it appears that the compileString() function expects SCSS.

Also, I want to make use of @import to achieve a better structure. I've also tried to change to scss syntax. In this case npm start does not return errors, but in the folder of my generated site (_site) there is no css file generated. Styles are not applied and I get the following error on the console:

The resource "http://localhost:8081/assets/scripts/main.js" has been blocked due to a MIME type error ("text/html").

This is the tutorial I followed:

Answer 1

Found that I need to add syntax: 'indented' here:

// Compile Sass
eleventyConfig.addExtension("sass", {
  outputFileExtension: "css",
  compile: async function (inputContent, inputPath) {
    // Skip files like _fileName.scss
    let parsed = path.parse(inputPath);
    if (parsed.name.startsWith("_")) {
      return;
    }

    // Run file content through Sass
    let result = sass.compileString(inputContent, {
      loadPaths: [parsed.dir || "."],
      syntax: "indented", <-----------------------------
      sourceMap: false // or true, your choice!
    });

    // Allow included files from @use or @import to
    // trigger rebuilds when using --incremental
    this.addDependencies(inputPath, result.loadedUrls);

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

My problem after this is that the variables are not being recognized even though they are imported from main.sass