Changing partial scss file does not auto-recompile main scss file

[LouisMulder2]

Hi, thank you for this great extension.

My issue is that when I make changes in a partial scss file ( example: _partial.scss ), it does not recompile the main file ( example: main.scss ) where I @import the partial files.

Is there any way to tell the extension settings to recompile the main file as well whenever an imported partial file linked to it is changed?

Otherwise I have to manually make a change in the main file again and recompile for the changes I made in the partial file to take effect and this is very tedious.

[ritwickdey]

Hi, On any partial scss changes, it should recompile all scss file. Is this not happening to you?

[LouisMulder2]

I've set it to only recompile my main scss file as I do not want to recompile all the scss files, this is unnecessary. But if a partial file is imported to the main file then changes in those partials should be detected in the main file and should recompile that only. Otherwise I have to manually refresh the main scss file to see the changes made in the partials.

[atz6975]

Duplicate of #64

[Eric-Jackson]

@ritwickdey it does not. Here is my output:

--------------------
Watching...
--------------------
Change Detected...
_variables.scss
--------------------
Compiling Sass/Scss Files: 
--------------------
Watching...
--------------------

Here is my workspace configuration:

		"liveSassCompile.settings.formats": [
			// This is Default.
			{
				"format": "expanded",
				"extensionName": ".css",
				"savePath": "~/../dist/"
			},
			// You can add more
			{
				"format": "compressed",
				"extensionName": ".min.css",
				"savePath": "~/../dist/"
			}
		],
		"liveSassCompile.settings.includeItems": [
			"/assets/scss/src/style.scss"
		],
		"liveSassCompile.settings.autoprefix": [
			"> 1%",
			"last 2 versions"
		]

And my folder structure:

I'm on Mac, latest version. Also latest stable version of VSCode.

[Eric-Jackson]

When editing style.scss, I get the following output:

--------------------
Watching...
--------------------
Generated :
/path/to/assets/scss/dist/style.min.css
/path/to/assets/scss/dist/style.min.css.map
--------------------
Watching...
--------------------

Which is a successful compile.

[tyzen9]

Was there ever an answer to this problem - I am experiencing the EXACT same thing as @Eric-Jackson. Is the answer a different plugin that someone could recommend?

[cartersteinhoff]

I am also looking for a solution to this. Would be awesome to get it solved.

[hdd113]

This problem has been around for a while. Are there any solutions coming?

[jhunLazaro]

waiting for a solution for this prob

[ParishKhan]

In my case, if I create the scss file without "_" prefix then it doesn't compile the main scss file. For example -

1. _partial.scss works
2. partial.scss don't work

[madze]

Experiencing the same issue. Will compile the main scss file if a change happens there, but no compilation when a change to a partial occurs (despite detecting the change).

[ghost]

Same here - changes to partials not generating new css files. change to main scsss file works as expected...on v3

[brentdanley]

Just started using this today. Same thing. Primary Sass file compiles on change, no problem. Partials have change detected, but parent stylesheet not updated.

[pxlngn]

I too have this issue. It is standard practice to import all partials into one main .scss file and then only compile to one file. But when you are working, it should compile your sass if you save the main file. If you can't use with partials in this manner, this is a very limited extension.

You can use gulp and grunt in this manner... but this extension seems sooo close!

To be clear: folder structure: partials/_partial1.scss partials/_partial2.scss main.scss <--- this is the file that compiles

Save any of the above and it should only compile main.scss

[scottenock]

Throwing my name into the mix. I'm still experiencing this issue. 🤷‍♂

[wavinginspace]

@ScottEnock --> @ParishKhan solution worked for me! just need to add underscore to front the partials filenames. and importing like so:

@import './_variables.scss';

[robhutters]

Still an issue for me.

Underscoring partials didn't work. Neither did changing the string quotes from " to ', which I saw suggested somewhere else too.

VSCode V1.42 (January 2020) SASS Compiler V3.0.0

[SanBen]

I have the exact same issue. Changing a partial file does not lead to a recompile of other files.

I noticed it's because I have a whitelist rule inside my settings:

"liveSassCompile.settings.includeItems": [
    "../Resources/scss/*.scss"
  ],

If I remove this it works. ~~But I don't know how to fix it otherwise.~~

Actually changing the rule to an exclude rule worked:

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

[sKopheK]

I have the exact same issue. Changing a partial file does not lead to a recompile of other files.

I noticed it's because I have a whitelist rule inside my settings:

"liveSassCompile.settings.includeItems": [
    "../Resources/scss/*.scss"
  ],

If I remove this it works. ~But I don't know how to fix it otherwise.~

Actually changing the rule to an exclude rule worked:

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

this actually did the trick, not very nice for big projects tho. the issue should still be fixed

[glenn2223]

This issue seems to relate to 2 things:

1. Partial files that don't start with _. If this underscore is missing then it will either process the file or ignore it depending on include/exclude settings. Changes to files with a leading _ will process all files (settings dependant)
2. An incorrect glob pattern in the includeList setting. Please check the glob pattern, ref
   It automatically starts at the folder you're in, but you can use ./. It's rare you should start with anything other than text (or ./). If you start with a / then it's starting in the root folder/drive (i.e. the c:/ drive on windows)

Hope this helps

EDIT: Reworded (1) to highlight user error (sorry added the leading line later and forgot to change it)

[SanBen]

This issue seems to relate to 2 things:

1. Changes to files that start with _ automatically process all files that are found (settings dependant), if this underscore is missing then it will either process the file or ignore it depending on include/exclude settings
2. An incorrect glob pattern in the includeList setting. Please check the glob pattern, ref It automatically starts at the folder you're in, but you can use ./. It's rare you should start with anything other than text (or ./). If you start with a / then it's starting in the root folder/drive (i.e. the c:/ drive on windows)

Hope this helps

1. This is expected behaviour as partials are usually imported in other files and a full recompile of all non-partial files is desired. This should not be the cause of the problem, no settings were changed and it works without an include rule.

2. The glob pattern was set correctly. It recognized the change, but it did not recompile on changing a partial file. Changing a non-partial file would however lead to a full recompile. This leads me to believe that it is not a pattern matching problem.

[glenn2223]

@SanBen

Sorry, updated my answer 🤦‍♂️.

Also, can I see your folder structure?

[glenn2223]

2. The glob pattern was set correctly. It recognized the change, but it did not recompile on changing a partial file. Changing a non-partial file would however lead to a full recompile. This leads me to believe that it is not a pattern matching problem.

Ref these lines: As you can see, all it does it check the file is a SASS/SCSS file then writes to the output "Change detected". It's later on that it pulls the exclude/include settings and processes based on those (regardless of the fact it's a partial - as partials just get you past line 57).

Could you confirm you were using the default excludeList and the includeList you originally provided?
If so, please could I see your file structure. Thanks.

[robbiegod]

I had a hyphen in my folder names in my scss folder. For example, "template-parts" was the folder name. When I made any changes to the partials in that folder, it would not compile. Apparently it did not like the hyphen.

I removed the hyphen and everything works.

[mdsadid]

@LouisMulder2 I have a solution for this issue. You just have to add some settings in vscode's "settings.json" file like this.

"liveSassCompile.settings.includeItems": [ "sass/bootstrap.scss", "sass/main.scss" ],

In the settings, I have included my main sass file which has contained all other partial sass files. If you do this then the extension will work correctly and recompile your main sass file each time, no matter which partial sass file you do change.

Note: You have to put exact the same file name in the settings otherwise the extension will not work correctly.

Here, you can see my folder structure of a project in vs code. In this project, I have a Sass folder and in this Sass folder, I have a main sass file whose name is "main.scss", and on the right side, you can see all the partials I have imported in my main.scss file. As I have included this main sass file in the settings, so the Live Sass Compiler now automatically recognizes the "main.scss" file by its name and recompile it every time.

This solution works for me, hope that it will work for you too.

[rickvian]

https://github.com/ritwickdey/vscode-live-sass-compiler/issues/224#issuecomment-538019321

i followed ritwickdey instruction and it works

[nikkione]

if someone still have this issue, and all suggestion before doesn't help you, just check if the workspace folder you are working with are ROOT workplace folder in your vs code. it solved the issue for me. cheers!

[anuith]

@nikkione I'm still having this problem. Please explain your suggestion again, I still cannot understand.

My workspace folder is like this (VSCode in WSL)

/path/to/my-workspace/
├ my-project.code-workspace
├ my-project-folder
│ ├ one
│ │ ├ one-a
│ │ │ ├ style.scss
│ │ │ └ _style-partial.scss
│ │ └ one-b
│ ├ two
│ └ three

And my workspace only included these folder

• my-project-folder/one/one-a
• my-project-folder/two

I've tried setting liveSassCompile.settings.includeItems as one of these

• my-project-folder/one/one-a/*.scss
• one-a/*.scss
• /one-a/*.scss

Neither of them worked.

[glenn2223]

@nikkione I'm still having this problem. Please explain your suggestion again, I still cannot understand.

My workspace folder is like this (VSCode in WSL)

/path/to/my-workspace/
├ my-project.code-workspace
├ my-project-folder
│ ├ one
│ │ ├ one-a
│ │ │ ├ style.scss
│ │ │ └ _style-partial.scss
│ │ └ one-b
│ ├ two
│ └ three

And my workspace only included these folder

• my-project-folder/one/one-a
• my-project-folder/two

I've tried setting liveSassCompile.settings.includeItems as one of these

• my-project-folder/one/one-a/*.scss
• one-a/*.scss
• /one-a/*.scss

Neither of them worked.

Have you tried **/one-a/*.scss or **/one/one-a/*.scss or one/one-a/*.scss

There's a great glob tester available at the link below https://globster.xyz/ If I remember right it's the whole path (from the root) that's passed to the glob tester so the ** at the start is key

[bartek-swiderski92]

Hello Guys I had the same problem. Inspired by prashantui's coment I removed the other project from the VSC workspace leaving the current one as the only one and it worked! Now Live Sass is generating *.css after each change to any of the files. Please check.