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

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 文件中，我正在导入一些通用的scss 部分，例如_skinsVariables 和_specificCode。每个皮肤的 _skinVariables 部分更改，_specificCode 是在位于all_skins 目录之外的所有 scss 文件中重用的一般部分。

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

我正在使用 PhpStorm 的文件观察器，因此对特定 scss 文件的任何更改都会触发观察器，但对包含的 _specificCode（或任何包含的部分）的修改不会触发它。

有没有办法编译父文件夹中的所有 scss 文件？这些编号的子文件夹有 30 多个，因此手工操作非常耗时。

任何使用命令行、PhpStorm 本身或其他软件（如 grunt）的解决方案都可以满足我的需求（最不希望）。

编辑：

file.scss 如下：

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

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

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

观察者目前的工作方式是仅在对 file.scss 本身进行修改时触发，而不是对包含的部分进行修改。

有什么解决办法吗？

Answer 1

所以现在你已经设置了文件观察器来观察打开的文件，并且在修改的情况下它应该只编译文件本身。

你需要设置你的scss transpiler来编译/all_skins/1/css/file.scss、/all_skins/2/css/file.scss等，但我不知道ruby transpiler是否您正在使用的可以进行此设置。

我解决了与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 文件夹（可以通过“范围”设置）并运行名为“样式”的 gulp 任务，它应该可以工作。