css - 如何从多个输入目录将 CSS 文件输出到单个目录？

Question

是否有一个配置选项可以让我输出位于多个目录中的 scss 文件？即:

foo / foo.scss
bar / bar.scss
baz / baz.scss

进入单个输出目录

css / foo.css
      bar.css
      baz.css

Answer 1

考虑为每个组件创建一个包含虚拟文件的 sass 目录:

project/
  css/
    foo.css
    bar.css
    baz.css
  modules/
    foo/
      foo.scss
    bar/
      bar.scss
    baz/
      baz.scss
  sass/
    foo.scss
    bar.scss
    baz.scss

每个虚拟文件都应该导入相应的组件。

sass/foo.scss:

@import "../modules/foo/foo.scss";

设置好所有虚拟文件后，从元素的根目录运行 sass --update sass:css。