CODEWITHSUNDEEP
javascriptcsswebpack
Sam
Sam

Reputation: 1848

Webpack; how to import css dynamically

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 ?

Upvotes: 5

Views: 9221

Answers (1)

lissettdm
lissettdm

Reputation: 13078

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

Upvotes: 6

Related Questions