Gewusst wie: importieren von CSS-Module mit Typoskript, Reagieren und Webpack
Gewusst wie: importieren von CSS-Module in Typoskript mit Webpack?
-
Generieren (oder auto-generate)
.d.ts
Dateien für CSS? Und die klassische Typoskriptimport
Aussage? Mit./styles.css.d.ts
:import * as styles from './styles.css'
-
Importieren mit
require
Webpack-Funktion?let styles = require("./styles.css");
Aber für die Letzte Ansatz, den ich zu definieren, die require
Funktion.
Was ist der beste Ansatz, oder die beste option, und eine, die kann auch mit IntelliSense für die CSS-Datei-Definitionen und Klassen?
- entweder
import * as styles from ...
oderimport styles = require(...
gültig sind. Du wirst wahrscheinlich erklären müssen, ein Modul für die css-Datei sowieso-entweder ausdrückliche oder generisch für alle css-Dateien-- wie der typescript-compiler haben keine Ahnung davon. siehe hier für automatisierte definition-generator. - Möglich, Duplikat der Verwenden Sie CSS-Module in Komponenten Reagieren mit Typoskript gebaut von webpack
Du musst angemeldet sein, um einen Kommentar abzugeben.
A) Wie du sagst, es ist eine einfachste (aber nicht beste) option erfordern:
require
da es nicht standard-feature in Typoskript.Einfachste Eingabe für diese spezifische erfordern, können sein:
Webpack wird dann kompilieren Typoskript und Module verwenden, richtig - ABER ohne IDE-Hilfe-und Klassennamen überprüft bauen.
B) gibt Es eine bessere Lösung die Verwendung von standard - import:
tsc
compiler fehlFür die ordnungsgemäße IntelliSense, Webpack generieren muss, - Typen, - definition, die für jede css-Datei:
Verwenden webpack Testungen-für-css-Module-loader
Loader generiert
*.css.d.ts
- Dateien für die einzelnen css-Dateien in Ihrer CodebasisErwähnt
typings-for-css-loader
enthält ein bug und weil der Dateitypen generation Verzögerung, es ist am besten zu erklären, Globale*.css
geben Sie im Falle unserer*.css.d.ts
Datei ist noch nicht generiert.Dass kleiner bug Szenario:
component.css
import * as css from './component.css'
webpack
component.css.d.ts
), aber es ist zu spät für typescript-compiler zu finden, neue Testungen Dateiwebpack
wieder fix build-Fehler.Einfache Lösung ist zum erstellen der globalen definition (zB. Datei namens
typings.d.ts
in der Quell-root) für den Import von CSS-Module:Diese definition wird genutzt werden, wenn es keine css-Datei generiert (zB. Sie haben Hinzugefügt, neue css-Datei). Sonst werden verwendet, erzeugt spezifische (muss in selben Ordner und die Namen derselben als Quell-Datei +
.d.ts
Erweiterung), zB.component.css.d.ts
definition und IntelliSense funktioniert perfekt.Beispiel
component.css.d.ts
:Und wenn Sie nicht wollen, um zu sehen, generierte css-Testungen Sie können filter definieren, die in der IDE zu verbergen alle Dateien mit der Erweiterung .css.d....ts in deinen Quellen.
Ich habe eine Datei namens
Global.d.ts
odertypings.d.ts
zu meinem./src
Ordner mit einigen Typ-Definitionen:Webpack css config:
Dann habe ich einfach das Modul importieren wie:
import styles from "./App.module.css";
*.module.css
. So alle Sie tun müssen, um den "import a von b" syntax arbeiten alle umbenennen .css-Dateien zu einer neuen Datei.- Modul.css und importieren Sie Sie wieimport styles from "./File.module.css"
.Dies ist genau das, was ich verwendet zu tun und habe noch den code in ein paar meiner Projekte gibt.
Nun : ich schrieb typestyle : http://typestyle.github.io/#/ aber Sie nicht haben, um es zu benutzen. Just-stick mit
const styles = require('./styles.css')
wenn es dich glücklich macht. FWIW Sie können auch raw-css mit typestyle, wenn Sie möchten, http://typestyle.github.io/#/rawlet styles = require("./styles.css");
ist der beste Ansatz weiter, weil es es5-version von javascript, die kompatibel ist mit jeder Funktion zu reagieren.import * as styles from './styles.css'
ist es6 version von javascript.