如何在phpstorm上只查看主要的sass文件？

Question

我有一个css结构，我有一个供应商的文件夹，其他的模块，其他的框架，根据sass我有我的主文件从其他文件夹导入所有其他sass文件。

如何将PHPStorm上的文件监视器设置为仅监视特定的main.scss文件？

这就是我在PHPStorm文件观察器上所拥有的。

参数：

    cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

工作目录：

    $FileDir$

要刷新的输出路径：

    $FileParentDir$/css/$FileNameWithoutExtension$.css

Answer 1

昨天我遇到了同样的问题并且放弃了并告诉自己我必须睡过头才能创造出新的想法

这里神奇的词是 Partials ＆gt; SASS Guide: Partials

您必须使用下划线扩展所有非主文件，因此您的文件vendors.sass例如如下所示：_vendors.sass。 File Watcher现在知道他可以跳过这个文件，因为它是部分文件。那么主文件是唯一一个没有下划线的文件：）

在下面，我将向您展示我的文件夹结构和观察者的配置。

function setup(): React.Component {
  ...
}

这是phpstorm的配置告诉应用程序保存（压缩）输出文件的位置：

<强>参数：

├── css
│   ├── sass
│   │   ├── _cookie.sass
│   │   ├── _farben.sass
│   │   ├── _navi.sass
│   │   ├── _schriften.sass
│   │   ├── _sidebar.sass
│   │   ├── _typo.sass
│   │   └── style.sass
│   ├── style.css

工作目录：

--no-cache --update $FileName$:$FileParentDir$/$FileNameWithoutExtension$.css --style compressed 

要刷新的输出路径：

$fileDir$

我认为您可能已经解决了这个问题，因为您的问题已经超过五个月了。但就我而言，我是盲目地看到这是一个简单的sass-thing。所以希望将来没有人需要为像我这样的解决方案而奋斗！

干杯

Answer 2

这可以通过PHPStorm（大概是WebStorm）实现。
注意：我正在使用版本2018.3

要仅转换一个“主”文件，您需要配置PHPStorm File Watcher 作用域：

1. 打开PHPStorm首选项（在Mac上为command comma）
2. 搜索File Watchers并对其进行编辑。
3. 找到您的SCSS文件监视程序（大概可以与其他监视程序一起使用）并进行编辑。
4. 在配置窗口中，单击“范围”下拉菜单右侧的3点图标。
5. 在“合并范围”窗口中，单击+图标以添加新的合并范围。
6. 从“添加范围”下拉列表中，选择Local Scope。
7. 出现提示时，输入范围的描述性名称（类似Theme File Only）
8. 现在，您应该在“作用域”窗口中（请参见屏幕截图）。在中间的“文件资源管理器”部分中，展开树并找到您想要转存的文件。
9. 单击文件（您可以选择多个文件），然后单击右侧的Include按钮。
10. 点击Apply，然后点击OK。
11. 在文件查看器对话框的“范围”下拉列表中，确保选择了新添加的范围（名为Them File Only或类似名称）。点击Apply，然后点击OK。

这时，IDE将仅监视并转换所选的特定文件。