Webstorm configuring SCSS Automatic compilation Path

Webstorm supports synchronous compilation of sass, which is write-and-compile, and can specify the directory of the compiled CSS.

The webstorm used in this article is version 8.0

In the top left corner, click File → Settings →File Watchers

Click the green ' + ' sign in the upper-right corner of the window of the popup, then select Scss

-------------------------------------------------------------------------------

Arguments:

You can configure the output path of the compiled file, which I write here:

--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

Notice that $FileName$ there is a colon followed by the $FileParentDir$ parent folder of the folder where the Scss file is located , not the parent folder of the Scss file.

For a chestnut, my project called sass-learn , there is a Scss folder, which contains scss files, then according to the results of such a configuration, Style.scss folder is Scss,scss is the parent folder is Sass-learn, Then find the CSS folder under Sass-learn, and the compiled Style.css file will be here.

---------------------------------------------------------------------------------

Output Paths to refresh:

Change to this:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

There are two points to note in the process of use:

1. Synchronous compilation can only be opened under the project folder, that is, webstorm to the left of the project. It is not possible to open a file outside of a project.
2. This has nothing to do with Webstorm, that is, sass compilation can not be with Chinese, no matter the path name, filename, the contents of the file, can not be recognized in Chinese, if you want to modify it is not not, but I do not think Chinese is very good, develop good habits.

Webstorm configuring SCSS Automatic compilation Path