gajus / gajus/babel-plugin-react-css-modules

Document how to use with create-react-app

Offen
#247 14 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
JavaScript
Sterne
2k
Forks
159
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

tl;dr;

Use https://github.com/sharegate/craco.

Create `craco.config.js`:

```js
const CSS_MODULE_LOCAL_IDENT_NAME = '[local]___[hash:base64:5]';

module.exports = {
style: {
modules: {
camelCase: true,
localIdentName: CSS_MODULE_LOCAL_IDENT_NAME
}
},
babel: {
loaderOptions: {
// Without this Babel caches module name resolution,
// e.g. wrongly identifies that CSS module does not exist.
cacheDirectory: false,
},
plugins: [
[
'babel-plugin-react-css-modules',
{
attributeNames: {
activeStyleName: 'activeClassName'
},
filetypes: {
'.scss': {
syntax: 'postcss-scss'
}
},
generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME,
handleMissingStyleName: 'warn'
}
]
]
}
};

```

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Finde im Repository den Dokumentations- oder README-Abschnitt mit den Integrationsanweisungen und prüfe das verlinkte craco-Projekt. Füge das bereitgestellte Beispiel für craco.config.js hinzu und erkläre, wie es die Verwendung mit Create React App ermöglicht; die Aufgabe ist erledigt, wenn ein Benutzer die dokumentierte Einrichtung nachvollziehen kann.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
babel, javascript, react
Bereich
documentation, frontend
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.