12

我有一个反应组件，它有 X 选项用于导入使用 CSS 模块的样式表。

理想情况下，我希望通过使用例如获取一个全局环境变量

进程.env.主题

我不能使用：

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

我可以用：

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

然而.....

import/no-dynamic-requireeslint 规则一开始就说它不好。 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;
4

1 回答 1

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 模块加载器

于 2018-06-05T08:47:26.947 回答