Use scss in idea to compile css files

Use scss in idea, and compile and generate css files in real time

Recently, ideas are often used for writing projects. I rely heavily on scss when writing styles, and it is very painful to modify styles without it. It feels a bit cumbersome to switch between vscode and idea. So I chose to configure scss in idea.

First install ruby

Downloads (rubyinstaller.org)

My computer is 64-bit, and the following is installed
Insert image description here

During the installation process, be sure to check this item, and others directly next.
Insert image description here

After the installation is complete, enter on the command line

ruby -v

Check whether the installation is successful, if the version number appears, the installation is successful.

After ruby ​​is successfully installed, install compass and enter the command line

gem install compass

(This installation is a bit slow, you need to wait a minute or two)

Then compass -v checks whether the installation is successful and the version information

Install normalize, command line input

gem install compass-normalize

Install sass, command line input

gem install sass

Then sass -v checks whether the installation is successful and the version information

Then install the plug-in File Watcher in the idea
Insert image description here
and the next step is to set

Insert image description here
in:

    Program选择步骤3中Ruby路径中,bin目录下的scss.bat文件。

    Argument部分选择: --no-cache --update --watch $FileDir$

    Output paths to refresh选择: $FileDir$:$FileNameWithoutExtension$.css

    这三个参数不是一定需要这么写,因为$ $之间带不同的参数表示不同的意思。如果啊,我是说如果,你真的不想去理解$里面不同参数代表的意思,你用绝对路径也是能办到的。。当然这种就只能用在你这一个project中了。

    这个是官方的new watchers的文档,里面都有记录,有兴趣的了解了解
     https://www.jetbrains.com/help/idea/2020.2/new-watcher-dialog.html。

Conclusion:
After using it for the past two days, I feel that using scss in idea is really not as good as using it in VScode. The experience is not as good as vscode. In addition, in idea, I have to submit the project and the css file compiled by scss. It is also in the subdirectory of scss (this should be able to be set). In short, I think I might as well use VScode. Another trial and error experience.

Guess you like

Origin blog.csdn.net/L19541216/article/details/130910235