Aktivieren der source-Karten erstellen-reagieren-app?

gibt es mehrere Möglichkeiten, das zu erreichen-source-mapping erstellen-reagieren-app, aber soweit ich weiß - in jedem Fall müssen Sie zum Bearbeiten der config von webpack.
Configs und Skripts für npm-cli-Befehle (start, bauen, eject) gespeichert sind, in einem Paket namens 'reagieren-Skripte'. Es gibt zwei Möglichkeiten, um auf Sie zugreifen:

option Ein) werfen Sie Ihr Projekt durch ausführen $ yarn eject. Dies wird entfernen Sie alle zugehörigen Abhängigkeiten in Ihrem Projekt-Paket.json und auch dirs aus reagieren-scripts Paket namens config und scripts in einem Stamm des Projekts fest.

option B) Machen Sie Ihre eigenen benutzerdefinierten reagieren-Skripten-Paket (oder jemand ' s). In diesem Fall, Sie haben Sie nicht Auswerfen von einem Projekt und das Projekt wird sauber sein. Auf diese Weise können Sie ersetzen Standard 'reagieren-Skripte', die mit Ihren eigenen.

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

versuchen Sie mir, wenn Sie es wünschen - rulsky-reagieren-scripts - es kommt mit sass Verarbeitung (mit sourcemaps aktiviert) und browsersync.

Entweder Weg, müssen Sie Knoten hinzufügen-sass und sass-loader in dependency graph (in verschiedenen Orten).

Nächsten Schritte, die ich werde zeigen, wie hinzufügen sorceMap durch Auswerfen Projekt und nehme an, Sie haben Garn (weil mit CRA ist es besser, verwenden Sie Garn). Alle Pfade sind relativ zum Stamm des Projekts

1) yarn eject

2) yarn add node-sass sass-loader

3) öffnen Sie config/webpack.config.dev.js

4) im Modul.Regeln Bearbeiten excudions für die Datei-loader von style-Dateien
``

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

``

5) in den "style-bezogene Kette von Lader' erweitern 'test' - Eigenschaft:
``

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

``

6) hinzufügen, um die Optionen von "css-loader' - Eigenschaft sourceMap: true,. Es sollte ungefähr so Aussehen:
``

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

``

7), direkt nach 'css-loader' hinzufügen 'sass-loader' mit den entsprechenden Optionen:
``

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

``

8) Nun müssen wir Bearbeiten der Produktion Konfiguration von webpack.

9) öffnen config/webpack.config.prod.js und nehmen Sie die gleichen änderungen vor: - Datei-loader HAFTUNGSAUSSCHLÜSSE und-Stil-im Zusammenhang Kette der Lader.

Hinzufügen "--source-Karte" - 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