Search code examples
sasseleventy

Eleventy: change Sass output hierarchy

I'm using 11ty to build a static website and I'd like to use Sass. To do this I've used eleventy-plugin-sass. It does compile the Sass code into a CSS file, but it copies the input hierarchy to the output.

For example, in my input folder I have the following hierarchy:

input/
    _includes/
    img/
    posts/
    src/
        scss/
            partials/
            main.scss

and when I run npx @11ty/eleventy it compiles into this:

output/
    img/
    posts/
    input/
        src/
            scss/
                main.css
    index.html

I would like to have something like

output/
    img/
    posts/
    css/
        main.css
    index.html

Is this possible using eleventy-plugin-sass? If not, what would be another way to achieve this?

Solution

  • I just released a new version (1.1.0) of eleventy-plugin-sass and there you can customize the output directory with the new parameter outputDir