How to use a webpack dynamic import with a variable query string?

Question

Using webpack 3 and react, I can import a file like this:

import(`src/Main.sass`).then(...do something)

I have a loader for the imported fi

Answer 1

If you look at this part of documentation

For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

This means that static analysis will search for every .json file within ./locale/ folder and bundle it, meaning it'll know every possible target. With query string you'll have basically infinite number of possible targets because query string could be anything and therefore won't be able to know what to bundle.

I guess this is just entirely different functionality from dynamic path resolution which obviously is not supported in the current import() statement.

Your best bet is to change folder structure to have multiple .css files for each theme and then load it using dynamic path as suggested in documentation (language example) or you could do something like this

const themes = {
  "themename": () => import(
    `./Main.module.css?theme=themename`
  ),
  // other themes
}

This way you'd have cleaner code showing all possible themes that can be passed to prop (static analysis would know exactly what the query string is, so it will work) and then you'd use it like so

componentDidMount = () => {
    const { themeName } = this.props
    themes[themeName]().then((result) => {
      this.setState({ theme: result })
    })
}

I'd rather have the query string implementation as you've suggested but for now, as far as I've investigated, it's not possible.