Phpstorm configuring file Watcher to automatically compile Sass files under Windows

Recently contacted SASS this CSS preprocessor, which needs to install the Ruby Runtime Environment first on Windows. After you've installed Ruby and sass, you'll find it troublesome to enter commands in the console if you want to convert the. sass file into CSS.

Because I use the IDE is Phpstorm, so go to its official website upside down, you can use the file watchers inside to achieve automatic conversion. sass->.css file.

In fact, when you create a new. Sass file, Phpstorm will also be prompted to configure file watchers.

Configuration steps

Take the Phpstorm 7.1.3 of the Windows environment as an example:

1. Open the Settings screen

When you open an item with Phpstorm, pressing Ctrl+alt+s (the default shortcut key) appears with the File Watchers Configuration page.

2. New configuration

Click the plus sign on the right, and the configuration page will appear after you select Sass.

Because we are configuring SASS, the program entry is filled with sass.bat path. If it was installed with Ruby's gem, he would be in the Bin folder in the Ruby directory.

3. Fill in the environment variables

Because the Sass.bat operation requires Ruby's command-line environment, there is also a need to add environment variables that run ruby in the environment variables .

For example, my settings here are:

4. Testing

After configuring a new. sass file, any changes you make will automatically compile your. css file, and if you do not specify an output path, the CSS file defaults to the Sass file.

Phpstorm configuring file Watcher to automatically compile Sass files under Windows