Multi theme setup - webpack / Vue-cli

Viewed 489

I'm about to create embeddable application that can be styled per client on a basic level (colors mostly).

My idea was to use some query parameters of an embed, like here: <iframe src="embeddedApplication?theme=client_1"/> and then read query parameter and request appropriate styling on top of the base. All good, easy peasy lemon squeezy.

What i didn't foresee is that webpack configuration is gonna be such a pain in the sass. I'm used to vue-cli and i'd rather stick to it (that probably means webpack-chain, but thats not an issue) at least would like to keep it's webpack config and just extend it.

Ideally i'd like to create client_1.scss and client_2.scss and so on containig only scss variables. Then i'd (ideally) talk webpack somehow into looping through all .vue files (as it normally does) but then repeat the loop for every client_N.scss file, resolving settings import from this file.

Visually:

src
|--themes
|  |-- client_1.scss
|  |-- client_2.scss
|
|--components
   |-- comp_A
   |-- comp_B

dist
|--client_1.css /* comp_A + comp_B with variables from client_1.scss
|--client_1.css /* comp_A + comp_B with variables from client_2.scss

I've tried a lot, but i didn't manage to come close to this. Closest i've got was generating two separate styles (adding *.scss entry points). But then I'm just writing global styles.

Does anyone have any ideas? Thanks a lot!

UPDATE

Currently i'm loading multiple JSON files containing scss variables (sounds kinda funny, i know; that's the way of @epegzz/sass-vars-loader) so the scss variables are resolved correctly in vue single file components.

chainWebpack: config => {
    const files = fs.readdirSync('./src/assets/themes/');

    files.forEach(file => {
        config.module.rule('scss').oneOf('vue')
            .use('sass-vars-loader')
            .loader('@epegzz/sass-vars-loader')
            .options({
                syntax: 'scss',
                files: [
                    path.resolve(__dirname, `src/assets/themes/${file}`)
                ]
            })
    });
}

That's all nice but the original problem is actually unresolved. My forEach loop does include all the files, but there's still only one css output.

If i could only 'repeat' the whole build process again...?

0 Answers
Related