CODEWITHSUNDEEP
cssvisual-studio-codenpmsassvscode-extensions
youngmrnelson
youngmrnelson

Reputation: 51

Live SASS Compiler creating extra files?

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!

Upvotes: 5

Views: 2610

Answers (3)

glenn223
glenn223

Reputation: 303

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

An example of this would be **/!(main).scss. It's the !() that is the negative glob pattern, it means if the pattern inside matches then ignore it.

You can see it action over at https://globster.xyz/. Just use the setup below

  • paste the glob pattern above in to the main field
  • Click edit files and paste the below into the field
/myapp/main.scss
/myapp/partials/file1.scss
/myapp/other.scss
  • click apply and it should be updated and everything but the main file should be blue

Upvotes: 2

TechTycho
TechTycho

Reputation: 164

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

 "liveSassCompile.settings.generateMap": true,

to this:

 "liveSassCompile.settings.generateMap": false,

Upvotes: 0

Adehunoluwa Praise
Adehunoluwa Praise

Reputation: 30

Dart sass comes with an inbuilt compiler Just run the code

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

Upvotes: 1

Related Questions