Wie verwenden von css-Module erstellen-reagieren-app?

Laut einer tweet von Dan Abramov, CSS-Module unterstützen, gibt es im erzeugen-reagieren-app (CRA). Man muss einfach zu geben, Erweiterung des module.css seine stylesheets, um die Funktion aktivieren, aber das funktioniert nicht mit mir. Ich bin mit der version 1.1.4 von react-scripts. Wie kann ich die css-Module mit CRA? Dank

Es ist nur verfügbar auf der cra-v2. Siehe github.com/facebook/create-react-app/pull/2285
hast du manga -, um herauszufinden, wie Sie Ihre app korrekt angezeigt, auf FB? Garn upgrade reagieren-Skripts@neueste ergab die gleichen Ergebnisse, nachdem ich hochgeladen das neue bauen.

InformationsquelleAutor Muhammad Saqib | 2018-05-08

62

Müssen Sie nicht Auswerfen.

Erstellen-Reagieren-App unterstützt css-Module direkt aus der box als in der version 2, die ist jetzt stabil.

Upgrade auf v2 (reagieren-Skripts@neueste) durch ausführen yarn upgrade react-scripts@latest.

Sie einfach zu erstellen Sie eine Datei mit der extension .module.css

Beispiel:
```
.myStyle {
  color: #fff
}
```
Dann können Sie es verwenden, etwa so:
```
import React from 'react'
import styles from 'mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>
```
Ich bin mit [email protected] und es funktioniert nicht. Bin ich über die gute version von reagieren-Skripte ?
nächste major-version beginnt mit 2. Führen Sie den Befehl habe ich in die Antwort, wenn Sie möchten, zu aktualisieren. Sie sehen die Versionen hier

InformationsquelleAutor Michael McQuade
1

Aktivieren CSS-Modul in Ihrer app, werden Sie nicht brauchen, um Auswerfen zu erstellen-reagieren-app. Sie können Folgen Sie diesen einfachen Schritten dieser link den Einsatz von CSS-Modul in Ihrem Projekt.

Aber im Fall, wenn Sie ausgeworfen Ihre erstellen-reagieren-app, dann müssen Sie finden die Datei namens

"webpack.config.js"

öffnen Sie diese Datei und suchen Sie das {test:cssRegex....etc} in Zeile Nr. 391 und ersetzen Sie diese änderungen:
```
            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },
```
Öffnen .js-Datei und die import-Anweisung wie diese
```
import cssStyleClassName from './MyApp.css';
```
Dann ist dieser import-Anweisung können Sie folgende änderungen im Komponenten-tags wie diese
```
<div className={cssStyleClassName.styleName}></div>
```
styleName ist, was Sie definiert in Ihrem MyAppStyle.css-Datei
```
.styleName{
your properties here...
}
```
Nach werfen Sie die app, starten Sie den lokalen server, irgendwann verpasst bekommen nicht reflektieren.

Hinweis In der früheren version gab es zwei generierte Datei, die für die Produktion und dev getrennt. Jetzt in der aktuellen version eine Datei namens "webpack.config.js" Datei, für die Sie benötigen, an die betroffenen für änderungen. Danke.

InformationsquelleAutor SachinVsSachin
0

Müssen Sie Auswerfen erstellen-reagieren-app und dann in den config-Dateien für webpack fügen Sie diese 2 Zeilen

Und laden von css-Komponente, die Sie wan ' T, (i keed Komponente und css im gleichen Ordner)
```
import classes from './SomeComponentStyle.css';
```
...
```
<div className={classes.RedDiv}>
```
innen SomeComponentStyle.css
```
.RedDiv {
  /* styles for red div */
}
```
InformationsquelleAutor ivica.moke

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.