So aktivieren Sie Quellkarten in create-react-app?

Question

jeder.

Ich bin ein neues Mitglied von reagieren und ich erstellte meine App verwenden create-reat-app. Ich verwendete node-sass-chokidar Paket wie react's document. Aber ich weiß nicht, wie man "Quellkarten" der scss-Datei aktiviert.

Danke für jede Hilfe.

Answer 1

Es gibt mehrere Möglichkeiten, Source-Mapping mit create-react-app zu erreichen, aber soweit ich weiß - müssen Sie in jedem Fall die Konfiguration des Webpacks bearbeiten. Configs und Skripte für npm CLI-Befehle (Start, Build, Eject) werden in einem Paket namens 'react-scripts' gespeichert. Es gibt zwei Möglichkeiten, auf sie zuzugreifen:

Option A) werfen Sie Ihr Projekt aus, indem Sie $ yarn eject ausführen. Dadurch werden alle verwandten Abhängigkeiten in Ihr Projekt package.json und auch in das rew-scripts package namens config und scripts in ein root Ihres Projekts extrahiert.

option B) Machen Sie Ihre eigenen benutzerdefinierten Reaction-Skripte-Paket (oder verwenden Sie jemandes). In diesem Fall müssen Sie nicht aus einem Projekt auswerfen und Ihr Projekt wird sauber sein. Auf diese Weise können Sie die Standard-Reaktionskripte durch Ihre eigenen ersetzen.

yarn remove react-scripts 
yarn add <your-custom-react-scripts> 

try Mine wenn Sie es wünschen - rulsky reagieren-Skripte - es kommt mit sass Verarbeitung (mit sourcemaps aktiviert) und browsersync.

In beiden Fällen müssen Sie node-sass und sass-loader in Abhängigkeitsgraphen hinzufügen (aber an verschiedenen Stellen).

---

Nächste Schritte Ich werde zeigen, wie sorceMap durch Projekt Auswerfen hinzuzufügen und übernehmen Sie Garn haben (weil mit CRA es besser ist, Garn zu verwenden). Alle Wege sind relativ zur Wurzel des Projekts

1) yarn eject

2) yarn add node-sass sass-loader

3) offen config/webpack.config.dev.js

4) in module.rules bearbeiten excudions für Datei-loader von Style-Dateien `` ``

- /\.css$/, 
+ /\.(css|scss|sass)$/, 

`` ``

5) in 'Stil bezogenen Kette von Ladern' erweitert 'test' Eigenschaft: `` ``

- test: /\.css$/, 
+ test: /\.(css|scss|sass)$/, 

`` ``

6) in den Optionen von ‚CSS-loader 'Eigentum sourceMap: true,.Es sollte wie so aussehen: `` ``

{ 
loader: require.resolve('css-loader'), 
    options: { 
    importLoaders: 1, 
    sourceMap: true, 
    }, 
}, 

`` ``

7) direkt nach 'CSS-loader' add 'Sass-loader' mit entsprechenden Optionen: `` `` Jetzt

{ 
loader: require.resolve('sass-loader'), 
    options: { 
    sourceMap: true, 
    } 
}, 

`` ``

8) müssen wir bearbeiten Produktionskonfiguration von webpack.

9) Öffnen Sie config/webpack.config.prod.js und nehmen Sie die gleichen Änderungen vor: Datei-Loader-Ausschlüsse und stilbezogene Loader-Kette.

Answer 2

Fügen Sie die "--source-map" Option mit dem Wert "true", wie im Beispiel unten:

node-sass-chokidar --source-map true --include-path ./node_modules src/styles/scss -o src/styles/css