使用 Atom Plugin sass-autocompile by armin-pfaeffle 编译成多个 .scss 文件

Question

我很确定这个插件是否可以实现这一点，但我目前的问题是我维护一个大型 SCSS 项目，它有三个侧面，我实际上希望在保存时编译三个不同的 CSS 文件。

我有三个主要文件：

1. core-something_1.scss
2. core-something_2.scss
3. 列表项

core-something_3.scss

所有文件都需要相同的重置颜色等。这就是为什么它们都在一个 SCSS 项目中。为了能够编译，我需要添加注释： // main: ../core-something_1.scss

这只会编译一个文件，这是有道理的，但是否有可能添加 smth.像这样： // main: "../core-something_1.scss", "../core-something_2.scss", "../core-something_3.scss"

结果将是它为我自动编译三个文件。最好的情况是摆脱这些 cmets，只需自动检查调用 scss 子文件的位置并编译它们。我曾经在“Coda by Panic”工作，但几周前切换到 Atom。在 Coda 中，没有任何 cmets 一切正常。也许有人可以帮忙。谢谢！ :)

插件链接：https://github.com/armin-pfaeffle/sass-autocompile

Answer 1

聚会有点晚了，但我可能会为其他抱怨部分文件并且在保存时未编译到主文件的人提供解决方案。

我在所有 _partial 文件中都使用了这个注释掉的小行。这告诉 SASS 编译部分并将它们添加到主文件中：

// main: main.scss

显然，将main.scss 更改为主文件的文件名，并将其放在样式表的第一行。

Answer 2

如果您需要在整个站点中维护一组通用颜色，将其拆分为部分并将其引用到您的每个 scss 文件中不是更好吗？

@import 'reset-colors';

Answer 3

在 Atom sass-autocompile 设置中选择/勾选选项 Compile on Save 和“Compile with 'expanded' output style”

定义“扩展”输出样式文件路径 -> ../css/$1.css

当您保存/编译您的 main.scss 文件时，它会在您的主项目中创建一个“css”文件夹，您将获得一个输出 .css 文件。

你应该导入你所有的_core-something1.scss， _core-something2.scss 到您的 main.scss 文件中。

即

@import "core-something1"; @import "core-something1";

你不需要编译单个文件你只需要编译/保存main.scss