5

I am using webpack as the build tool, less as the css pre-processor in my application.

I have a less file named variable.less which contains the general values like color,size for the whole site, then different components require different less which use the variables defined in the variable.less

Now we need to create multiple themes for the site, I am not sure how to get start, any suggestions?

hguser
  • 35,079
  • 54
  • 159
  • 293
  • 1
    How are you planning to load those themes? – Juho Vepsäläinen Apr 28 '16 at 05:49
  • Add class for the `html` element when the theme changed. For example ` – hguser Apr 28 '16 at 06:29
  • Ok, you can definitely generate the theme bundles with webpack (separate entries, `ExtractTextPlugin`). It's loading the themes that gets interesting. You'll need to use some dynamic solution for that. Essentially you just need to set style to point at the right file through JavaScript, though. Would this be enough for an answer? – Juho Vepsäläinen Apr 28 '16 at 06:45
  • All the styles are bundled in the js on my application at the moment, there are only on entry point(js), so can you give more details? – hguser Apr 28 '16 at 06:49
  • I wrote about the basic idea [here](http://survivejs.com/webpack/building-with-webpack/separating-css/). You'll end up with a separate `entry` for your themes like that. Webpack will write css and empty js (useless file) for each through `ExtractTextPlugin`. You can then refer to these files through JavaScript to achieve dynamic loading you want. – Juho Vepsäläinen Apr 28 '16 at 07:03
  • hguser, did you find a solution ? – jacob May 24 '17 at 13:19
  • Similar problem and my solution is webpack plugin. https://stackoverflow.com/questions/46624753/how-to-configure-webpack-to-generate-separate-css-themes/51128587#51128587 – Terence Jul 02 '18 at 03:00

0 Answers0