Ignore some .scss files in vscode live sass compiler

Question

I am using vscode live sass compiler to compile my sass code to css and am trying to destructure my code such that I have codes for specific function in separate file then I can import them to the main .scss all at once so that one css file to be generated as this is all I need because am using react.

I have been succesfull so far my problem is that even the other refactored code that I already imported are compiled to css. I don't need this.

How can i tell live sass compiler to ignore them?

Answer 1

You can use liveSassCompile.settings.excludeList setting to exclude specific folders. All Sass/Scss files inside the folders will be ignored.

You can use negative glob pattern too if you want to exclude a specific file or files inside this folders.

Examples:

Default value

"liveSassCompile.settings.excludeList": [ 
     "**/node_modules/**",
     ".vscode/**" 
]

Negative glob pattern - if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression

"liveSassCompile.settings.excludeList": [
    "path/subpath/*[!(file1|file2)].scss"
]

You can find more info here.

Answer 2

There are two way through which you can prevent file to be compiled to generate separate .css file

1. File(.scss) name starting with underscore( _ ) well not be compiled to generate css file

2. If you have a folder with multiple .scss files you can exclude all files within folder and its subfolders through vscode setting.json file

Code

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**",
    "**/YOUR_FOLDER/**"
 ],

replace YOUR_FOLDER with your desired folder

example I have 'vender' named folder with all bootstrap source code files

Example:SCSS files in vender folder and it's subfolder will not be compiled