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

我有默認的css文件和單獨的css文件，只有在滿足某些條件的情況下才能應用（默認爲owerride）。有條件的CSS在create-react-app中

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

什麼是最好的方式來決定是否加載或不加載特定的CSS文件動態？

2017-10-19 Martins Untals

您可以使用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'); 
}

來源

2017-10-19 17:51:24 mpen

嗯。看起來像只在開發模式下工作 - 部署後，他的服務器似乎像反正加載的CSS，即使特定的代碼塊永遠不會執行。可能css程序集在加載頁面之前發生：/ –

@MinsinsUntals是的...如果您使用的是ExtractTextPlugin，那會發生什麼。您可以使用CSS模塊並定位您的特定組件，以便不管CSS是否在每個頁面上都沒關係，或者您可以[看看這個]（https://github.com/faceyspacey/extract- css-chunks-webpack-plugin） - 我還沒有嘗試過，但它可能更接近你想要的。 – mpen

@MartinsUntals因此，您能夠在部署/生產級別找到動態CSS的解決方案嗎？ –

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

回答

相關問題