Currently, I am in the process of learning how to integrate SASS into my web development projects. However, I am facing some challenges when it comes to properly compiling my .scss files into a single .css file.
Upon running sass --version in my terminal, I see 1.53.0 compiled with dart2js 2.17.3. I am using the Live Sass Compiler extension by Glenn Marks, and my settings.json file configuration is as follows:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"defaults"
]
}
Here is the structure of my current project directory: Current Project Directory Structure
My main issue revolves around the fact that when I click Watch Sass, not only the desired files main.css and main.css.map are output, but also index.css and index.css.map files are created. I am aiming to follow the 7-1 SASS Architecture and have created index.scss files within specific folders, each containing files from the directory, which will then be forwarded to main.scss.
Is there a way to prevent the creation of the extra files? I am considering exploring the use of npm, although I am not very familiar with it. If it proves to be more efficient in utilizing SASS compared to using a VS Code extension, I am willing to switch to that approach and abandon the extension altogether.
Thank you in advance for your assistance. I hope I have provided sufficient information!