Sage 9 and third-party plugin stylesheets

[manalyse]

I cannot seem to understand how I can work directly on the sass files of plugins such as WooCommerce in Sage 9, instead of overriding them.

I have read the Sage eBook, this post: Sage + Woocommerce - how to handle stylesheets? and also the sources @ben cites in his answer there.

I can’t even find the manifest.json that is being talked about. I understand that the goal is to actually copy the sass file of, let’s say, woocommerce, and then let it compile through yarn, just like a regular stylesheet.

The problem is, however, when I follow the solution for this here Sage + Woocommerce - how to handle stylesheets?, that the stylesheets are looking for fonts, images, etc. all in the theme folder (because the woocommerce.scss stylesheet relatively links them).

I would have to either copy all the assets to the theme directories and override the urls, which I do not find very practical, or find a way to “tell” how to compile using the assets in the plugins folder. This is what I supposed the manifest.json was for, but I do not find that file or find and example walk-through of how that all is supposed to work.

Am I overlooking something?

I wonder if there is anybody who did this and can share the steps. Also, I wonder if you prefer enqueing the woocommerce stylesheet (and js) depending on body-classes (if woocommerce is even necessary) and how you accomplish that. The eBook unfortunately does not explain this - neither for WooCommerce, nor for any other third-party plugin.

[ben]

@manalyse

I have read the Sage eBook, this post: Sage + Woocommerce - how to handle stylesheets? and also the sources @benword cites in his answer there.

This is for Sage 8

@manalyse

I can’t even find the manifest.json that is being talked about. I understand that the goal is to actually copy the sass file of, let’s say, woocommerce, and then let it compile through yarn, just like a regular stylesheet.

@manalyse

This is what I supposed the manifest.json was for, but I do not find that file or find and example walk-through of how that all is supposed to work.

This was all for Sage 8, and is no longer recommended with HTTP/2 adoption

Even if you were using Sage 8, it was never setup in a way where you could “work directly on the sass files of plugins” instead of overriding them.

[manalyse]

Thanks for the heads-up. But the question is: what is the recommended way of working with third-party plugin stylesheets in Sage 9? Just overriding them in the theme stylesheets? It seems like a very imperfect and wasteful way of working.

[MWDelaney]

You could dequeue the plugin’s styles in your theme and rewrite them (or copy what’s needed from the theme and rewrite what you need to). Often plugins will have an option to remove their own styling so that you can write your own.

Which plugin are you working with?

[manalyse]

WooCommerce is one of the plugins I use and the reason I was searching in this topic, it will be more difficult to work like this with two other plugins I use, eventON and bookly, I suppose. They are not very developer friendly, but I did not find any better plugins for event management and appointments.