Hi, 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 …

Did you manage to get this working?

Yes, forgot to get back here, but here’s what I did. I duplicated main.scss: https://github.com/roots/sage/blob/master/resources/assets/styles/main.scss I added a new entry point here to this new file : https://github.com/roots/sage/blob/master/resources/assets/config.json I modified the script …

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.

Do you have any error message? The project is a bit old now and I can’t really get back to it now.

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 pro…

Understood, I had the same scenario. Did you correctly duplicated this line? roots/sage/blob/master/resources/assets/config.json#L3 { "entry": { "main": [ "./scripts/main.js", "./styles/main.scss" ], "customizer": [ "./scripts/customizer.js" ] }, "publicPath": "/app/the…

"entry": { "main": [ "./scripts/main.js", "./styles/main.scss" ], "a": [ "./styles/a.scss" ], "b": [ "./styles/b.scss" ], "customizer": [ "./scripts/customizer.js" ] }, It looks like this.

Pretty weird. I usually do yarn run build to show errors (watch usually doesn’t output anything), but you said it compiles fine… Is the watcher ignoring all your SCSS files, or only children files, or only entry files?

I don’t think the watcher is ignoring files. It detects changes and compiles. It’s just not loading the right css in the browser.

Oooooh right I totally forgot this one. I literally spent days on it… Please take a look at this thread: Yarn watch not generating styles directory I had to bypass the way Webpack does HMR which doesn’t work when working with conditionally loaded CSS files.

Roots Discourse

Managing SCSS themes with Webpack

sage

ben April 20, 2018, 3:28pm 18

Webpack hot module replacement doesn't inject custom scss