Webpack / ES6动态导入

时间:2018-08-13 15:02:09

标签: javascript webpack ecmascript-6

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

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

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

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

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

有什么想法吗?

1 个答案:

答案 0 :(得分:-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,以获取更多帮助。

希望,这会有所帮助!