Ich habe eine minimale React-Komponente, die aus zwei Dateien besteht: button.jsx und button.less . Die Stile werden importiert, und die Klassennamen werden mit einem Hash versehen, damit alle Stile für die Komponente lokal sind.
Das ist großartig, aber ich möchte den gesamten Code in einer Datei haben. Ist es möglich, die Stile in der jsx-Datei zu kapseln, ohne die CSS-Modularität zu verlieren?
button.jsx
%Vor%button.less
%Vor%webpack.config.js (relevante Bits)
%Vor%button.jsx
%Vor%Inspiriert von vue.js und vue-loader .
Ich glaube, das ist ein Duplikat dieser unbeantworteten Frage: Verwendung von css-loader inline mit Webpack + React
Sie können dafür Callback-Loader verwenden. Dies ist tatsächlich ein Workaround, aber es ist der Trick. Implementieren Sie einfach einen Callback, der Ihren CSS-Code extrahiert und durch einen entsprechenden Import ersetzt. Zum Beispiel:
webpack.config.js
%Vor%button.jsx
%Vor%Ich habe einen Webpack-Loader für diesen Zweck geschrieben:
Sie können ein einzelnes style-Tag pro JSX-Datei schreiben und es unterstützt auch webpack-CSS-Module, wenn Sie möchten.
Bei der Erstellung extrahiert es die Regeln aus Ihrem Stil-Tag und verschiebt sie in eine externe CSS-Datei.
Ich sollte beachten, dass es, da es Ihre Regeln einfach in eine externe CSS-Datei extrahiert, gut mit SASS, autoprefixer usw. zusammenspielt.
Tags und Links css reactjs webpack react-jsx css-modules