Live SASS Compiler creating extra files?

user_17713120 0
Viewed 132

I'm currently trying to learn how to implement SASS into my web development projects but I'm struggling a little bit with figuring out how to properly compile my .scss files into one single .css file.

When I run sass --version in my terminal, I receive 1.53.0 compiled with dart2js 2.17.3. As far as extensions go, I'm using Live Sass Compiler by Glenn Marks, and within the settings.json file, my configuration looks like this:

{
  "liveSassCompile.settings.formats":[
     {
         "format": "expanded",
         "extensionName": ".css",
         "savePath": "/css"
     },
 ],
 "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
 ],
 "liveSassCompile.settings.generateMap": true,
 "liveSassCompile.settings.autoprefix": [
     "defaults"
 ]
}

This is my current project directory: Current Project Directory Structure

My current issue is that whenever I click Watch Sass, the only file I want to be output is the main.css and main.css.map but it creates an index.css and index.css.map file as well.

I'm trying to implement something similar to the 7 - 1 SASS Architecture, and within each of those folders I created an index.scss that'll contain each file in it's directory, which will then be @forward to the main.scss.

Is there any particular way I can avoid the extra files being created? I'm not too familiar with npm but I've heard it would be more beneficial to learn it in order to utilize SASS as opposed to using a VS Code extension and I'm more than open to taking that approach and scrapping the entire extension as a whole if it proves to be more efficient.

Thank you for your help in advanced, I hope I provided enough information!

npm vscode-extensions visual-studio-code sass css
3 Answers

Dart sass comes with an inbuilt compiler Just run the code

sass --watch sass/main.scss css/main.css

user_151565820

This one faulty line is probably the reason for your problem. Change this:

 "liveSassCompile.settings.generateMap": true,

to this:

 "liveSassCompile.settings.generateMap": false,
user_153894100

If you decide to stick with my extension then you can specify a single file to output/watch with the liveSassCompile.settings.includeItems setting - as shown below

{
    "liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}

Alternatively, and possibly a better solution, you can use a negative glob expression in the liveSassCompile.settings.partialsList to treat every other file as a partial. Then, when any SASS file is saved, it triggers compilation of just your main.scss file

user_38123740
Related