{"id":2894,"date":"2023-01-22T17:45:00","date_gmt":"2023-01-22T08:45:00","guid":{"rendered":"https:\/\/techstock-online.com\/?p=2894"},"modified":"2023-01-22T17:45:00","modified_gmt":"2023-01-22T08:45:00","slug":"how-to-compile-scss-in-vscode-in-the-css-folder","status":"publish","type":"post","link":"https:\/\/techstock-online.com\/en\/how-to-compile-scss-in-vscode-in-the-css-folder\/","title":{"rendered":"[Quit Atom] How to compile scss in VSCode in the css folder."},"content":{"rendered":"<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-reaction-buttons\" ><\/div>\n\n\n\n<p>On December 15, 2022, the Atom editor will be out of service, and coding engineers, including myself, will have to find an alternative editor software to Atom.<\/p>\n\n\n\n<p>The following editors are recommended as alternatives to Atom.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visual Studio Code<\/li>\n\n\n\n<li>Brackets<\/li>\n\n\n\n<li>Sublime Text<\/li>\n<\/ul>\n\n\n\n<p>There are several other editors available, but they lack extensibility or charge a fee, so I would recommend the above software.<\/p>\n\n\n\n<p>Of these, I chose Visual Studio Code (VSCode), which is provided by Microsoft.<\/p>\n\n\n\n<p>Many engineers may be switching from Atom to VSCode.<br><br><\/p>\n\n\n\n<p>My first stumbling block with VSCode was setting the scss files to be compiled in the css folder.<\/p>\n\n\n\n<p>My engineering colleagues were similarly unable to fully migrate from Atom to VSCode because they did not understand that point.<\/p>\n\n\n\n<p>We were finally able to solve that and fully migrate to VSCode, and this paper will tell you about it, with screenshots and videos!<\/p>\n\n\n\n<p>We hope you&#8217;ll take advantage of it!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The extension uses &#8220;Live Sass Compiler&#8221;.<\/h2>\n\n\n\n<p>In Atom, it is called a &#8220;package&#8221;; in VSCode, it is called an &#8220;extension&#8221;.<\/p>\n\n\n\n<p>The &#8220;Live Sass Compiler&#8221; extension is used to compile scss.<\/p>\n\n\n\n<p>You probably know how to install extensions, so I&#8217;ll skip that part.<\/p>\n\n\n\n<p>Press the Settings button in Live Sass Compiler and press &#8220;Extension Settings&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"724\" src=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image01.png\" alt=\"\" class=\"wp-image-2834\" srcset=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image01.png 897w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image01-300x242.png 300w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image01-768x620.png 768w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Next, edit the item &#8220;Live Sass Compile > Settings: Formats&#8221;.<\/p>\n\n\n\n<p>There are various other setting items that can be set to your preference.<\/p>\n\n\n\n<p>Under &#8220;Live Sass Compile > Settings: Formats&#8221;, click &#8220;Edit in settings.json&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"530\" src=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-1024x530.png\" alt=\"\" class=\"wp-image-2849\" srcset=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-1024x530.png 1024w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-300x155.png 300w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-768x398.png 768w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-1536x795.png 1536w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>It is too small to see.<\/p>\n\n\n\n<p>Here it is.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"328\" src=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-01.png\" alt=\"\" class=\"wp-image-2852\" srcset=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-01.png 515w, https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/LiveSassCompiler_image02-01-300x191.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<p>Click to open settings.json, which automatically outputs the configuration code.<\/p>\n\n\n\n<p>The default value is this.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\"liveSassCompile.settings.formats\": &#091;\n\t\t{\n\t\t\t\"format\": \"expanded\",\n\t\t\t\"extensionName\": \".css\",\n\t\t\t\"savePath\": null,\n\t\t\t\"savePathReplacementPairs\": null\n\t\t}\n\t],<\/code><\/pre>\n\n\n\n<p>Rewrite this as follows.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\"liveSassCompile.settings.formats\": &#091;\n\t\t{\n\t\t\t\"format\": \"expanded\",\n\t\t\t\"extensionName\": \".css\",\n\t\t\t\"savePath\": \"~\/..\/css\",\n\t\t\t\"savePathReplacementPairs\": null\n\t\t},\n\t],<\/code><\/pre>\n\n\n\n<p><br><\/p>\n\n\n\n<p>That&#8217;s it for settings.json.<\/p>\n\n\n\n<p>Many of you who have arrived at this paper may have seen these settings well in other articles.<\/p>\n\n\n\n<p>However, this setting alone would not have compiled the scss file and output it in the css folder.<\/p>\n\n\n\n<p>I was the same way.<\/p>\n\n\n\n<p>The articles you have seen so far were probably written by people who have been using VSCode for a long time and forgot to tell you about the concept of registering in the workspace, which I will tell you next.<\/p>\n\n\n\n<p>\u2192 [IMPORTANT] Register a working folder in the workspace.<\/p>\n\n\n\n<p>Next, register the folder to be worked on in the VSCode workspace.<\/p>\n\n\n\n<p>Without this process, compiling scss will output css files at the same hierarchy as the scss files.<\/p>\n\n\n\n<p>The video is a better way to understand how to register for the workspace.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/techstock-online.com\/wp\/wp-content\/uploads\/add_to_workspace.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>I will explain it in writing as well.<\/p>\n\n\n\n<p>This is the process of registering for a workspace.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag the folder you want to work with from Explorer to VSCode.<\/li>\n\n\n\n<li>Do you trust this folder?&#8221; will appear.<\/li>\n\n\n\n<li>Click &#8220;Trust.&#8221;<\/li>\n<\/ol>\n\n\n\n<p>The working folder is now registered in the workspace.<\/p>\n\n\n\n<p><br><br><\/p>\n\n\n\n<p>That&#8217;s all for the setup.<\/p>\n\n\n\n<p>However, scss is compiled to the css folder only in the working folder registered in the workspace.<\/p>\n\n\n\n<p>Please note that compiling scss files in folders not under the control of the workspace will not output them to the css folder.<\/p>\n\n\n\n<p>Now compile the scss file and see for yourself!<\/p>\n\n\n\n<p>I&#8217;d be happy to have your reactions if you&#8217;d like!<\/p>\n\n\n\n<p class=\"has-text-align-center\">\u2193\u3000\u2193\u3000\u2193\u3000\u2193\u3000\u2193\u3000\u2193<\/p>\n<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-reaction-buttons\" ><\/div>","protected":false},"excerpt":{"rendered":"<p>On December 15, 2022, the Atom editor will be out of service, and coding engineers, including myself, will hav [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/techstock-online.com\/?p=2829","footnotes":""},"categories":[2,7,17],"tags":[18,19,26,49,34],"class_list":["post-2894","post","type-post","status-publish","format-standard","hentry","category-html_css","category-web","category-17","tag-atom","tag-html-css","tag-sass","tag-scss","tag-34","en-US"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/posts\/2894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/comments?post=2894"}],"version-history":[{"count":12,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/posts\/2894\/revisions"}],"predecessor-version":[{"id":2906,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/posts\/2894\/revisions\/2906"}],"wp:attachment":[{"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/media?parent=2894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/categories?post=2894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techstock-online.com\/wp-json\/wp\/v2\/tags?post=2894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}