当文件夹中的任何SCSS文件更改时,使WebStorm重新编译单个SCSS文件

时间:2019-04-12 09:16:29

标签: sass webstorm

我正在研究一个我的同事也在从事的项目,他们正在Atom上进行该项目,并且他们已经设置了Atom,因此它的工作方式如下:

有一个文件夹css,在该文件夹中是主文件custom.scss,该文件导入所有其他的scss文件,并在custom.min.csscustom.min.css.map中进行编译。也有带有更多scss文件的子文件夹。每当css或其任何子文件夹中的任何scss文件更改时,custom.scss都会重新编译,但不会重新编译其他scss文件。

使用WebStorm的SCSS File Watcher,我可以这样做吗?

我的第一个尝试是将观察者设置中的scope更改为仅观看custom.scss,这确实可行,但是每次我要重新编译custom.scss时,我都必须更改它,而不是在我更改其他任何scss文件时也重新编译。

我的直觉是,我应该将范围设置为以递归方式监视css目录中的所有scss文件,并且应该更改文件观察器中的Arguments设置以明确表示compile custom.scss into custom.min.css,但是我不太确定该怎么做

1 个答案:

答案 0 :(得分:1)

此处的关键设置是“仅跟踪根文件”-未设置时,它将尝试编译所有单独保存的受监视scss文件,但设置后,仅在未监视时编译文件标记为包含在另一个文件中。

设置范围以监视所有scss文件上的更改:file:assets/css/*.scss

点击“仅跟踪根文件”

将参数更改为$FileName$:$FileNameWithoutExtension$.min.css --style compressed,以使其最小化

现在,当您保存custom.scss中包含的文件时,它将仅将custom.scss(和其他根文件)重新编译为custom.min.csscustom.min.css.map