Условный импорт на основе переменной среды

Question

У меня есть компонент реагирования, в котором есть X вариантов импортируемой таблицы стилей, использующей модули CSS.

В идеале я хочу получить глобальную переменную среды, используя, например,

process.env.THEME

Я не могу использовать:

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

Я могу использовать:

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

тем не мение.....

import/no-dynamic-require Правило eslint начинает говорить, что это плохо. https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md

Все статьи и посты, которые я прочитал, говорят, что это невозможно. Конечно, это общее желание, но я не могу на всю жизнь понять, как это сделать. Есть идеи?

---

Обновить:

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

Например, в качестве обходного пути, когда ваш компонент монтируется, вы можете попробовать проверить переменные env, а затем потребовать специальный файл css, как показано ниже:

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

Разрешение его как обещания должно помочь с модулями CSS:

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(() => {
    //...
});

ссылка-часть: ES6 Module Loader