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
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.