Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the webstorm sass compilation methods". In the daily operation, I believe many people have doubts about the webstorm sass compilation methods. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the webstorm sass compilation methods?" Next, please follow the editor to study!

The problem of sass compilation under webstorm

Saas needs to run in a ruby environment, so you need to install ruby 32 / 64

1. Install ruby

2. In the DOS command, test whether ruby is installed: ruby-v (enter, if the version number appears, ruby is installed successfully)

3. Install the sass command: gem install sass

4. Test whether sass is installed successfully: sass-v (enter, if the version number appears, sass is installed successfully)

Method 1: DOS commands sass conversion to ask css file monitoring

1. In the file directory, the method to open the dos command line: shift + right-click

2. Enter the sass command on the command line to compile the sass file into a css file

Sass style.scss mystyle.csssass style.scss.. / css/mystyle.css

Monitor compilation: when sass is modified, the css file is modified synchronously

Sass-watch style.scss:../css/mystyle.css

3. Exit monitoring ctrl + c, and select y

Method 2: webstorm has its own monitoring

1. Once and for all: configure the IDE environment:

IDE configuration (location: setting-- > Tools-- > File watchers)

If sass and css are two folders for scss and css, respectively:

Arguments:--style expanded-no-cache-update $FileName$:../css/$FileNameWithoutExtension$.css

Chinese compilation error: [cannot use any file name and remarks with Chinese] to find the file

Line 87 of lib\ ruby\ gems\ 2.3.0\ gems\ sass-3.4.22\ lib\ sass\ importers\ filesystem.rb

If name.index (@ root + "/") = 0 modified to if name.encode ("utf-8", 'gbk') .index (@ root + "/") = = 0

2. Add the following sentence @ charset "UTF-8" to the header of the .scss file

At this point, the study of "what are the webstorm sass compilation methods" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.