Webpack / ES6动态导入

Question

I'm using ES6 dynamic import to load a Sass file, according to an environment variable.

It's working fine, but when I build the production directory with Webpack, all the Sass files are exported as a JS chunk in the build directory.

After some research, I finally understand that import() look for similar files with the same path (only when I put a variable in the import)

It's quite problematic, I'd like to get the correct Sass file exported, and not the others.

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

Any idea ?

Answer 1

Normally, you can't do that!

Because import statement must be at the top. Thus, you cannot define the variable before import statement. Hence, you cannot utilize the variable in import statements.

---

But, you can trick to use like this:

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

---

Update

I am not sure about dynamic import, but it might help you further. See this proposal :

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

See this source for further help.

Hope, this helps!