十一：更改 Sass 输出层次结构

Question

我正在使用 11ty to build a static website and I'd like to use Sass. To do this I've used 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 脚本，它按预期工作，实际上，由于一些小问题 changes/extensions:

，我将我的脚本复制到这里

{
    "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"
    },
    ....

十一：更改 Sass 输出层次结构

Eleventy: change Sass output hierarchy

sass

eleventy