十一：改变Sass输出层次

Question

我正在使用11ty 构建一个静态网站，我想使用 Sass。为此，我使用了eleventy-plugin-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"
    },
    ....