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 ?

Answer 1

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");
}

See: https://stackblitz.com/edit/js-hrvzy9?file=index.js