css - 主SASS文件到多个CSS文件

Question

所以我遇到了这种不寻常的情况，可能这不是时髦的方式或正确的方式，这就是我问它的原因。

我有一个 main.scss ，它基本上导入了 Bootstrap 等所有其他部分和框架。如果我需要的只是一个全局 CSS，但我需要为各种组件和页面使用不同的 css 文件，那么它可以完美地工作。一种选择可能是在每个 SASS 文件中包含变量和混合并编译不同的 SASS 文件。以下是我没有走这条路的原因-

1. 这似乎不太对劲，也许有很多高效且自动化的方法。
2. 并非所有内容都是由我编写的，否则我可能无法选择安排变量和混合位置。例如。变量和混合没有在单独的文件中声明，我可能没有重构的选项。

我使用的一个选项是使用 grunt 分割最终编译的 css 并将它们放在不同的文件夹中，但随后更改图像和字体路径却是一个大麻烦。我不确定如何使用 imgmin 或此类实用程序来解决我的问题，也不知道我是否使用最有效的方法来实现我想要的。我还想避免工作流程中出现太多复杂情况。

寻找一些可能对我有帮助的建议或技巧。

Answer 1

我不知道为什么你会说编译多个 SASS 文件似乎不对。这就是我的处理方法。

如果你有很多变量和混入，请将共享的变量和混入放入一个文件中。

_shared.scsc:

$blue: #3b97c6;
$grey: #e6e6e6;

@mixin my_mixin {
  // ...
}

然后只需拥有多个 SASS 文件(不带下划线，以便单独编译它们)。

sass1.scss

@import "_shared";

// stuff only for sass-1

sass2.scss

@import "_shared";

// stuff only for sass-2

sass3.scss

@import "_shared";

// stuff only for sass-3

我是不是误解了什么？