Условный импорт на основе переменной среды - PullRequest
Новая
       35

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

0 голосов
/ 05 июня 2018

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

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

.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;

1 Ответ

0 голосов
/ 05 июня 2018

Например, в качестве обходного пути, когда ваш компонент монтируется, вы можете попробовать проверить переменные 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

...