Webpack； 如何動態導入 css

Question

搜索 web 后，我找不到直接答案，所以我的問題是：webpack 是否可以像這樣動態導入 css 文件：

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

我試過了，但它不起作用； 是否有解決方法或特殊的 webpack 模塊或其他？

Answer 1

這對我有用：

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

您也可以使用動態導入：

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

請參閱： https://stackblitz.com/edit/js-hrvzy9?file=index.js