Eleventy：更改Sass输出层次结构

编程问答 2022-08-12

问题描述

我正在使用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可以吗？如果没有，实现这一目标的另一种方式是什么？

解决方法

我刚刚发布了eleventy-plugin-sass的新版本（1.1.0），您可以在其中使用新参数outputDir自定义输出目录

,

看看这些。我基于此设置了 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"
    },....
eleventysass