Ich habe Standard-CSS-Datei und separate CSS-Datei, die angewendet werden sollte (um Standard-Einstellung) nur wenn bestimmte Bedingungen erfüllt sind.bedingte css in create-react-app
Ich verwende create-react-app mit Standard import 'file.css' Syntax.
Wie kann man am besten entscheiden, ob eine bestimmte CSS-Datei dynamisch geladen wird oder nicht?
Sie können stattdessen die Syntax require('file.css') verwenden. Dies ermöglicht es Ihnen, es in eine Bedingung zu setzen.
z.B.
if(someCondition) {
require('file.css');
}
hmm. sieht so aus, als ob es nur im Dev-Modus funktioniert - nach dem Deployment auf den Server scheint es, als würde css trotzdem geladen, auch wenn ein bestimmter Code-Block nie ausgeführt wird. Wahrscheinlich findet die Assemblierung vor dem Laden der Seite statt:/ –
@MartinsUntals Yeah ... wenn du ExtractTextPlugin verwendest, passiert das. Sie können CSS-Module verwenden und gezielt auf Ihre spezifischen Komponenten abzielen, so dass es keine Rolle spielt, ob das CSS auf jeder Seite ist oder nicht [oder werfen Sie einen Blick darauf] (https://github.com/faceyspacey/extract- css-chunks-webpack-plugin) - Ich habe es noch nicht ausprobiert, aber es könnte näher an dem sein, was Sie wollen. – mpen
@MartinsUntals So finden Sie die Lösung des dynamischen CSS auf Deploying/Produktionsebene? –
Sie können 'require ('file.css')' oder 'import ('file.css')' Syntax stattdessen verwenden - das ermöglicht es Ihnen, es innerhalb einer Bedingung zu verwenden. – mpen
importieren ('file.css') funktioniert nicht, während require.dd es als Antwort, so dass ich akzeptieren kann. und danke –
Sie benötigen möglicherweise [babel-plugin-syntax-dynamic-import] (https://babeljs.io/docs/plugins/syntax-dynamic-import/) für die 'import()' -Syntax. Webpack 2 unterstützt es bereits out-of-the-box, aber Babel muss es analysieren können. Beachten Sie jedoch, dass "import()" asynchron ist und "require" nicht. – mpen