PhpStorm SCSS

PhpStorm SCSS - 文件监视器设置(PhpStorm SCSS - File Watcher Setting)

我有这样的结构：

我在哪里尝试设置SCSS文件观察器。

以下是我目前的选择：

我的目标是编译

../scss/style.scss到../css/style.css

../scss/user/profile.scss到../css/user/profile.css

如何在文件观察器中设置我的设置以实现此模式？

I have structure like this:

Where I am trying to setup SCSS file watcher.

Here are my current options:

My goal is to compile

../scss/style.scss to ../css/style.css

../scss/user/profile.scss to ../css/user/profile.css

How to setup my setting in file watcher to achieve this pattern?

最满意答案

如果您的项目可能，请考虑使用指南针编译您的scss 。 通过这种方式，无论scss目录中的文件结构如何，编译后都会将此结构镜像到css目录中。 设置非常简单，还有一个很好的阅读指南： PhpStorm /在Compass项目中使用SASS和SCSS

基本上你需要：

安装指南针： gem install compass cd到public\themes\701目录并运行compass init ，配置文件config.rb将在这里创建，编辑此配置以反映您的目录结构

在设置中启用Compass支持：

文件>设置>语言和框架>指南针

现在设置File Watcher，如图：

$ProjectFileDir$\public\themes\701是config.rb文件目录的完整路径。

这将按要求将scss文件编译到css目录。

If it's possible for your project, consider using compass to compile your scss. By doing it this way, regardless of file structure in scss directory, after compilation will be this structure mirrored in css directory. It is quite easy to setup, there is also a good guide to read: PhpStorm / Working with SASS and SCSS in Compass Projects

Basically you need to:

Install compass: gem install compass cd to public\themes\701 directory and run compass init, configuration file config.rb will be created here, edit this configuration to reflect your directory structure

Enable Compass support in settings:

File > Setting > Languages & Frameworks > Compass

Now setup File Watcher like in picture:

$ProjectFileDir$\public\themes\701 is full path to directory with config.rb file.

This will compile scss files to css directory as requested.