11:更改Sass输出层次结构

Question

我正在使用十一度构建一个静态网站，我想使用Sass。为此，我使用了十一号插件。它确实将Sass代码编译成一个CSS文件，但它将输入层次结构复制到输出中。

例如，在我的输入文件夹中，我有以下层次结构：

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

当我运行npx @11ty/eleventy时，它会编译成这样：

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

我想要一些类似的

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

这有可能使用eleventy-plugin-sass吗？如果没有，还有什么办法可以做到这一点呢？

Answer 1

我刚刚发布了一个新版本的eleventy-plugin-sass (1.1.0)，您可以在那里使用新参数outputDir自定义输出目录

Answer 2

看看这些。我在此基础上设置了package.json脚本，它按照预期工作，实际上，我在这里复制我的脚本，原因是进行了一些小的更改/扩展：

1. https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty
2. https://mvolkmann.github.io/blog/eleventy/styling-with-sass/

{
    "name": "eleventy-from-start",
    "version": "0.0.0",
    "description": "A simple Eleventy starter",
    "scripts": {
        "build": "npm run sass && eleventy",
        "sass": "sass src/assets/css/main.scss:_site/assets/css/main.css --load-path=node_modules",
        "serve": "npm-run-all sass --parallel watch:*",
        "watch:eleventy": "eleventy --serve --port=4300",
        "watch:sass": "npm run sass -- --watch"
    },
    ....