如何编译位于不同文件夹中的所有scs文件

Question

我有一个如下的文件结构：

all_skins
|— 1
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 2
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
|— 3
|— css
|- _skinVariables.scss
|— file.scss
|— file.css
common_css
| _specificCode.scss
| _otherCode.scss

在每个"皮肤"的scss文件中，我导入了一些通用的scs部分，如_skinsVariables和_specificCode。每个皮肤的_skinVariables部分都会发生变化，_specificCode是在位于all_skins目录之外的所有scs文件中重复使用的通用部分。

问题是，每当我对specificCode部分文件进行更改时，我都需要手动重新编译每个scs文件，以使用修改后的代码生成新的css。

我使用的是PhpStorm的文件观察程序，所以对特定scss文件的任何更改都会触发观察程序，但对包含的_specificCode(或任何包含的部分)的修改都不会触发它。

有什么方法可以编译父文件夹中的所有scs文件吗？这些编号的子文件夹有30多个，所以手工操作很耗时。

任何使用命令行、PhpStorm本身或grunt等其他软件的解决方案都适合我(最不需要)。

编辑：

文件.css如下所示：

@import "skinVariables";
@import "../../../common_css/specificCode"

更清楚地说，问题是我在所有的file.scss中都包含了部分，为了让生活更轻松，大部分代码都来自部分。

当我修改在所有文件中导入的分部时，例如_specificCode.scss，我需要重新编译所有的file.scss，但这并没有发生。

观察者目前的工作方式似乎是，当对file.scss本身进行修改时，它们只会被触发，而不是对所包含的分部进行修改。

有什么解决办法吗？

Answer 1

因此，现在您已经设置了文件观察器来监视打开的文件，如果需要修改，它应该只编译文件本身。

你需要的是将你的scss transiler设置为编译/all_skins/1/css/file.scss、/all_skin/2/css/file.scss等，但我不知道你使用的ruby transiler是否能够进行此设置。

我用解决了类似的问题http://gulpjs.com(Grunt替代品)Gulpfile.js配置如下(更改为您的路径)：

gulp.task('styles', function() {
return gulp.src([
'all_skins/**/*.scss'
])
.pipe($.sass())
.pipe($.autoprefixer('last 3 version'));
});

然后设置一个PhpStorm的文件观察程序来观察整个all_skins和common_css文件夹(可以通过"scopes"设置)，并运行名为"styles"的gump任务，它应该可以工作。