How vscode runs scss files

This article mainly introduces how to run vscode scss file, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

How does vscode compile and run scss files?

1. The compilation of sass depends on Ruby environment, so install ruby first

2. After installing Ruby, type gem sass on the command line to install Sass

3. Look for the easy sass plug-in in the vscode extension and install it

4. Next, configure: click "File preference Settings" in the vs code menu bar to open the settings.json global configuration file.

"easysass.compileAfterSave": true, "easysass.formats": [/ / nested: nested indented css code. / / expanded: there is no indented, extended css code. / / compact: css code in a concise format. / / compressed: compressed css code {"format": "expanded", "extension": ".css"}, {"format": "compressed", "extension": ".min.css"}], "easysass.targetDir": "css/" / / path

5. Create a new folder. Create two new folders in the folder, one sass and one css. If you do not build a css folder, you will automatically create a folder after compilation.

6. Then create demo.sass under sass, and then write

.box color: red .img width: 100%; display: block

7. Press ctrl + s and compile directly. Because you set easysass.compileAfterSave to true when you set it before, saving will compile once, which is also to improve the efficiency of development.

Finally, you will find that there is an extra css file and a min.css file under css, which has something to do with the settings you have set, one without indentation and one with compression.

Thank you for reading this article carefully. I hope the article "how to run vscode scss File" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!