Creating multiple style files per scope vars

[naftis]

Hello, thanks for this plugin again.

    themePreprocessorPlugin({
      scss: {
        multipleScopeVars: [
          {
            scopeName: 'theme-primary',
            path: path.resolve('src/theme/primary-vars.scss'),
          },
          {
            scopeName: 'theme-client1',
            path: path.resolve('src/theme/primary-vars.scss'),
          },
          {
            scopeName: 'theme-client2',
            path: path.resolve('src/theme/primary-vars.scss'),
          },
          {
            scopeName: 'theme-client3',
            path: path.resolve('src/theme/client3-vars.scss'),
          },
        ],
        defaultScopeName: 'theme-primary',
        extract: true,
      },
    }),
  ],

This doesn't build .css files for every theme, as I get: GET /assets/theme-client2.css net::ERR_ABORTED 404 (Not Found). Am I doing it wrong, or should I create multiple files with different paths? (with symlink for example)

[GitOfZGT]

It working well in my demo. https://github.com/GitOfZGT/dynamic-theme-demos .

@zougt/vite-plugin-theme-preprocessor v1.4.4 is latest version.

[GitOfZGT]

This doesn't build .css files for every theme, as I get: GET /assets/theme-client2.css net::ERR_ABORTED 404 (Not Found). Am I doing it wrong, or should I create multiple files with different paths? (with symlink for example)

I was wrong.

Yes, you need different paths. and different SASS var values.

[GitOfZGT]

If you have to, you can try to adjust the order:

[naftis]

Would it be possible if every multipleScopeVar would generate their own css-file?

Consider my use case: 3 different companies use my application. Company 1 and Company 2 have unique themes. Company 3 uses the same theme as Company 1. I can say this in my JavaScript client bundle:

if (route.params.company === "Company 3") {
  useTheme("Company 1")
} else {
  useTheme(route.params.company);
}

But note; in this case my client bundle would leak customer information for everyone to see. If someone were to look at my client source code, they would know that I have Company 1 and Company 3 in my application.

If every multipleScopeVar was to generate their own css-file, I could just say:

useTheme(route.params.company);

---

That being said; I can also work around this issue by creating symlink. If you think this is not worth implementing, the symlink way is also easy. edit: I'm not sure if this works either. Do you have idea how should I manage different themes without leaking them to eachother?

[GitOfZGT]

First file must different others. It working.