I’m using the latest Sage (beta 2) and I need to generate multiple CSS files according to themes. Each theme has its own SCSS file which defines variables, such as colors, and shares the rest of the styles with others. I’m defining a entry point in config.json for each one. When building files with yarn run build, each CSS is correctly generated. So far, so good.
The problem rises when developing with watch mode. Webpack seems to only consider the main SCSS file and I can’t figure out how to make it load one theme or another. I stumbled upon some Webpack plugins which relate to this need, such as:
but I don’t know how it could fit in Sage config. I’m kind of a newbie with Webpack and a bit lost
A workaround seems to require the SCSS file in main.js, like require('../styles/theme/one.scss'), but it’s not really manageable because it would break the generated CSS when building files and I’d have to change it every time I test another theme.
The key would be to create a scss hierarchy that load common variables, then override some (like, colors), and finally load every other files. !default scss command could help.
It’s up to you to get the correct file according to the current theme. I’m using an Advanced Custom Field option page.
You got me puzzled. I’m trying to figure out the hierarchy and overrides. Do you have an example? I get the same problem over and over again. My build works like a charm. But my watch task keeps failing on the entry point.
There are no errors. Maybe easier to explain my situation. I got a multisite. Site a and b. I want to different stylesheets for both sites but use the same theme. I created 2 entry points with different variables. When I build via “yarn run build” both my websites get the correct stylesheet. The problem is the watch task. For some reason Webpack/Sage isn’t looking at the entry points while watching so my variables are ignores. This is a problem while developing the theme.
Good luck to find any easier solution The root issue is that Webpack isn’t building any CSS file when in watch mode, as HMR inserts styles from the RAM. It’s said to be more performant. Not sure if the issues it generates are worth it though… Maybe it is for 99% of use case, not for this particular one. Hope you’ll figure it out anyway!
I think I got an easier way of dealing with this. I created an ACF option to select a theme per website. Theme A or B. I copied main.scss and main.js. and created 2 new entry points (theme-a and theme-b). I made sure to load both css and js file per website depending on the selected theme option. Now when I change the devUrl in config.json the watch task is loading/injecting the right css.
Downside: I have 2 separate js files. I will look into this next.