有条件的CSS在create-react-app中

问题描述：

我有默认的css文件和单独的css文件，只有在满足某些条件的情况下才能应用（默认为owerride）。有条件的CSS在create-react-app中

我正在使用create-react-app wit默认的import 'file.css'语法。

什么是最好的方式来决定是否加载或不加载特定的CSS文件动态？

您可以使用require（'file.css'）'或'import（'file.css'）'语法 - 这样可以在条件语句中使用它。 – mpen

import（'file.css'）不起作用，而需要do.add它作为答案，所以我可以接受。并感谢 –

对于'import（）'语法，您可能需要[babel-plugin-syntax-dynamic-import]（https://babeljs.io/docs/plugins/syntax-dynamic-import/）。 Webpack 2已经支持它，但Babel需要能够解析它。但请注意，“import（）”是异步的，“require”不是。 – mpen

答

您可以改为使用require('file.css')语法。这将允许您将其放入条件内。

例如

if(someCondition) { 
    require('file.css'); 
}

嗯。看起来像只在开发模式下工作 - 部署后，他的服务器似乎像反正加载的CSS，即使特定的代码块永远不会执行。可能css程序集在加载页面之前发生：/ –

@MinsinsUntals是的...如果您使用的是ExtractTextPlugin，那会发生什么。您可以使用CSS模块并定位您的特定组件，以便不管CSS是否在每个页面上都没关系，或者您可以[看看这个]（https://github.com/faceyspacey/extract- css-chunks-webpack-plugin） - 我还没有尝试过，但它可能更接近你想要的。 – mpen

@MartinsUntals因此，您能够在部署/生产级别找到动态CSS的解决方案吗？ –

有条件的CSS在create-react-app中

相关推荐