Webpack / ES6动态导入

Question

根据环境变量，我正在使用ES6动态导入来加载Sass文件。

工作正常，但是当我使用Webpack构建生产目录时，所有Sass文件都将作为JS块导出到构建目录中。

经过研究，我终于了解到import（）寻找具有相同路径的相似文件（仅当我在导入中放入变量时）

这很成问题，我想导出正确的Sass文件，而不是其他文件。

import(`./assets/scss/App.${brandName}.scss`)

有什么想法吗？

Answer 1

通常，你不能那样做！

因为import语句必须在顶部。因此，您不能在import语句之前定义变量。因此，您不能在import语句中使用该变量。

---

但是，您可以像这样欺骗使用：

import brandName from 'your_path_to_brandName_export'
import(`./assets/scss/App.${brandName}.scss`)

---

更新

我不确定动态导入，但它可能会进一步帮助您。参见此proposal：

<script type="module">
  import * as module from './utils.mjs';
  module.default();
  // → logs 'Hi from the default export!'
  module.doStuff();
  // → logs 'Doing stuff…'
</script>

请参阅此source，以获取更多帮助。

希望，这会有所帮助！