vscode-live-sass-compiler
vscode-live-sass-compiler copied to clipboard
ritwickdey
Proper configuration for a parent/child theme setup
I am doing some development now on a Wordpress parent and child theme at the same time. In VS CODE, I want to work in a single workspace. I want Live SASS compiler to compile my sass in the parent theme when i make edits to those files, but i don't want it to compile it together with the the child theme. They should remain seperate.
The only way I could figure out how to do this was to setup a workspace for my parent theme and one for my child theme. I could then put my .vscode settings files at the root of each theme and have settings for each theme.
Did I do that right or is there a better way of doing this?
Hey, Did you figure this one out yet? I am trying to exclude paths from Wordpress but still scss files in "/public_html/wp-admin/" and "/public_html/wp-content/plugins/" are being compiled. Such a pain and can't seem to figure out why this keeps happening.
hi @cZeaushe - How I did was kind of ugly, but it worked. So, I made a workspace for the parent theme and another workspace for the child theme. I could setup config files for both individually. I would have two vs code windows open, one for each workspace and i had to hop between the two when i need to make updates to the different css files. This was not ideal at all and it breaks the lovely intellisense that vs code provides for wordpress dev. I suppose you could have a 3rd vs code window open that has the css compiler inactive and do you wordpress development in that window. You'd point that one to the root of your wordpress site. I believe the developer told me it is not possible to setup the compiler the way that I wanted too.
You could look into gulp or grunt and have it look for changes in your files and then compile the sass.
That's a pity it won't work. I might go with the gulp solution here. However, I usually edit my stuff over SSH and love the fact live-sass-compiler can be installed on the server.
really? How do you install it on the server? Got some docs you can recommend?
I am using the "Remote - SSH" extension for Visual Studio Code. Once you've established a SSH connection it let's you install live sass compiler, along other extensions, on the server. Depending what hosting you have (I use CloudWays) you can connect through SSH with the master credentials or app credentials. This works like a charm! And editing WordPress becomes way more fun and easier. The sad thing though, is that Live Sass Compiler, compiles all the .scss files in the WordPress folders like "/public_html/wp-admin/" and "/public_html/wp-content/plugins/". I haven't figured out yet how to exclude those folders yet from being compiled. For instance I have a parent theme with a scss folder and main.scss and _header.scss, _footer.scss etc etc. It'll compile main.scss from the parent theme but so does all other .scss files in the root from WordPress.
Oh snap I just found the issue. Got it working now! It's so dumb of me, the path is relative to the root. So in order to exclude the plugins folder etc and stop compiling those .scss files just do:
"liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", "**/wp-content/plugins/**", "**/wp-admin/**" ]
@cZeaushe oh ok, that wasn't exactly my problem. I wanted to be able to compile my parent theme styles and my child theme styles independantely. So that was what i was trying to do.
