Conditional Import based on environment variable

Question

I have a react component which has X options for a stylesheet to be imported which is using CSS Modules.

I ideally want to have a global environment variable fetched by using e.g.

process.env.THEME

I can't use:

import MyStyleSheet from `${process.env.THEME}/my.module.css`

I can use:

const MyStyleSheet = require(process.env.THEME/my.module.css);

however.....

import/no-dynamic-require eslint rule kicks off saying its bad. https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md

All the articles and posts I read say its not possible. Surely this is a common want but I can't for the life of me work out how to do it. Any ideas?

---

Update:

import React from 'react';

const Classes = import('./${process.env.theme}/Button.module.css');

const Button = () => (
  <button className={Classes.button}>My Themed Button</button>
);

export default Button;

Answer 1

For example as a workaround when your component is mounting you can try check env variables and then require specific css file like below:

class App extends Component {
    componentWillMount() {
         if(process.env.CUSTOM_ENV_VAR === 'test') {
            require('styles1.css');
         } else {
            require('styles2.css');
         }
    }
}

Resolving it as a promise should do the trick with css modules:

if (process.env.CUSTOM_ENV_VAR === 'theme1') {
    import('./theme1.css').then(() => {
        // ...
    });
else (process.env.CUSTOM_ENV_VAR === 'theme2') {
    import('./theme2.css').then(() => {
        //...
    });
}

import(`./${process.env.CUSTOM_ENV_VAR}.css`).then(() => {
    //...
});

reference-part: ES6 Module Loader