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文件中，每个＆＃34;皮肤＆＃34;我导入了一些常规的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转换器来编译/all_skins/1/css/file.scss,/all_skins/2/css/file.scss等，但我不知道是否红宝石转换器你正在使用的是这种设置。

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

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

1 个答案: