Webpack; how to import css dynamically

Question

After searching the web I cannot find a straight answer so my question is: Is it possible in webpack to import css files dynamically like so :

if(foo){
  import 'mobile.css'
} else {
  import 'desktop.css'
}

I tried this and it does not work; is there a workaround or special webpack module or else ?

romanoff's answer here might give you and idea github.com/webpack-contrib/css-loader/issues/189 — Ozgur Sar
– Ozgur Sar, Commented Dec 4, 2020 at 14:58

lissettdm · Accepted Answer · 2020-12-04 14:59:41Z

6

This works for me:

const foo = false;
if (foo) {
  require("./mobile.css");
} else {
  require("./desktop.css");
}

Also you can use the dynamic import:

const foo = false;
if (foo) {
  import("./mobile.css");
} else {
  import("./desktop.css");
}

answered Dec 4, 2020 at 14:51

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1