Скачать или смотреть How to Set the Path of Live Sass Compiler in VSCode to the Current Directory

Learn how to configure the `Live Sass Compiler` in Visual Studio Code (VSCode) so that compiled CSS files are generated in the same directory as your SCSS files.
---
This video is based on the question https://stackoverflow.com/q/68607817/ asked by the user 'CCCC' ( https://stackoverflow.com/u/10686620/ ) and on the answer https://stackoverflow.com/a/68607912/ provided by the user 'CCCC' ( https://stackoverflow.com/u/10686620/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how to set the path of live sass compiler to be the current path in VsCode

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Set the Path of Live Sass Compiler in VSCode to the Current Directory

If you're a web developer working with SASS (Syntactically Awesome Style Sheets), you may have encountered a common issue when using the Live Sass Compiler in Visual Studio Code (VSCode). Specifically, you might have noticed that when these stylesheets are compiled, the resulting .css files are not saved in the same directory as your original .scss files. Instead, they may be output to a default path such as /dist/css, which can be inconvenient. In this post, we will walk you through how to configure the Live Sass Compiler so that it saves compiling outputs, such as .css files, right next to your original source files.

Understanding the Problem

Consider the following folder structure:

[[See Video to Reveal this Text or Code Snippet]]

When you compile the SCSS files in the above structure, you might expect to see the compiled CSS files appear directly next to each corresponding SCSS file. However, as it stands, the setup typically results in outputs that look like this:

[[See Video to Reveal this Text or Code Snippet]]

In this structure, you would not see the .css files generated. Let’s discuss how you can remedy this issue.

Solution: Modifying settings.json

To ensure that the compiled .css and .css.map files are generated directly in the same directory as your SCSS files, you'll need to modify your settings.json file in VSCode. Below are the steps to do this:

Step 1: Open settings.json

Launch Visual Studio Code (VSCode).

Navigate to the command palette by pressing CTRL + SHIFT + P.

Type "Preferences: Open Settings (JSON)" and hit enter. This will allow you to edit your settings.json directly.

Step 2: Modify the Configuration

Add or modify the following section in your settings.json file:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Configuration

"format": "expanded": This specifies the compilation format for your CSS. "expanded" is a common format that allows for easier human readability.

"extensionName": ".css": This indicates the file extension for the output files; in this case, it is .css.

"savePath": null: Setting savePath to null allows the Live Sass Compiler to save the compiled files in the same directory as the original SCSS files. This is the key change needed.

Conclusion

By altering the settings.json configuration for your Live Sass Compiler, you can streamline your workflow and have a organized project structure where both your SCSS and CSS files reside side by side. This method not only saves you the hassle of searching for compiled files in different locations but also enhances your overall productivity.

Now, you should be able to enjoy a more efficient compiling process in your web development journey. Happy coding!