5

I am building an app with theming requirements that can only be determined at run time. At build time it is possible to have theme variables available for all themes.

Is it possible to get webpack to build node modules - in this case bootstrap - with different variables file? I guess at build time I would want it to build multiple versions/themes of bootstrap. Then at run time I could reference the correct css file based on some prefix.

e.g.

theme1.bootstrap.css 
theme2.bootstrap.css
theme3.bootstrap.css

I am using bootstrap 4, with webpack 2.

Is possible with webpack and how can I achieve this?

Ryan-Neal Mes
  • 6,003
  • 7
  • 52
  • 77

2 Answers2

0

Definitely. I'm assuming you are determining the themes based on a user profile type system. Take a look at below and add an if statement to look for the variable in sql then simply apply the css. simple. Try creating it and if you run into trouble post the code you have on here and i'm sure someone can help. Add stylesheet to Head using javascript in body script-in-body. also if you aren't using already bootstrap allows for theme file so you can keep the overall style loading and simply apply the color scheme you want so that you only need to load the bulkier script once.

mattyp
  • 32
  • 6
0

You can use the webpack plugin themes-switch, put all your theme files in a directory, the plugin would compile themes to individual files. Then use function changeTheme to switch themes at runtime.

https://github.com/terence55/themes-switch

Terence
  • 1
  • 1