Hinzufügen von SASS / SCSS zu einem Projekt zum Erstellen einer Reaktion

(Hinweis: In der neuesten Version der create-react-app ist SASS-Unterstützung integriert, und dieses Handbuch ist nicht erforderlich.)

In diesem Abschnitt wird erläutert, wie Sie den SASS / SCSS-Precompiler zu einem vorhandenen Projekt zum Erstellen und Reagieren von Apps hinzufügen. Dies funktioniert mit den regulären oder Typescript-Variationen von create-react-app und sollte unabhängig von den zahlreichen Webpack-Konfigurationssyntax-Variationen funktionieren.

Auswerfen
Sie müssen Ihr Projekt auswerfen, wenn Sie es noch nicht getan haben. Ich habe das schon oft gemacht, aber es kann ein großer, beängstigender Schritt sein. Lesen Sie hier, was es bedeutet, Ihr Projekt auszuwerfen. Dies ist erforderlich, um Ihre Webpack-Konfigurationsdateien manuell zu bearbeiten.

npm run eject

Installieren Sie SASS
Der SASS-Precompiler läuft zur Erstellungszeit und nicht zur Laufzeit, daher speichern wir ihn mit dem save-dev-Schalter.

npm installiere sass-loader node-sass --save-dev

Bearbeiten Sie die Webpack-Konfiguration
Sie öffnen Ihre dev-Konfigurationsdatei, suchen den vorhandenen CSS-Regelblock, duplizieren ihn und verwenden ihn als Referenz zum Erstellen eines neuen SCSS-Regelblocks. Lassen Sie die vorhandene CSS-Regel unverändert, damit Ihr Projekt sowohl mit SCSS- als auch mit einfachen CSS-Dateien funktioniert.

Suchen Sie die Datei config / webpack.config.dev.js. Suchen Sie nach dem CSS-Regelblock. Es wird ungefähr so ​​aussehen, aber nicht genau:

{
  Test: /\.css$/,
  benutzen: [
    {
      loader: require.resolve ('style-loader'),
    },
    {
      loader: require.resolve ('css-loader'),
      Optionen: {
        importLoaders: 1,
      }
    },
    {
      loader: require.resolve ('postcss-loader'),
      Optionen: {
        ident: 'postcss',
        Plugins: () => [
          erfordern ('postcss-flexbugs-fixes'),
          Autoprefixer ({
            Browser: [
              "> 1%",
              "Die letzten 4 Versionen",
              "Firefox ESR",
              "nicht dh <9",
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ]
},

Kopieren und duplizieren Sie den gesamten Block und fügen Sie ihn direkt über (vor) dem vorhandenen CSS-Block ein. Bearbeiten Sie den neuen "Test" -Wert, um scss zu erstellen:

{
  Test: /\.scss$/,

Fügen Sie einen Sass-Loader-Abschnitt in der Mitte der neuen Regel direkt nach dem CSS-Loader-Abschnitt ein. Sie fügen die drei Zeilen in der Mitte darunter ein. Die neue scss-Regel sieht ungefähr so ​​aus, aber nicht genau:

{
  Test: /\.scss$/,
  benutzen: [
    {
      loader: require.resolve ('style-loader'),
    },
    {
      loader: require.resolve ('css-loader'),
      Optionen: {
        importLoaders: 1,
      }
    },
    {
      loader: require.resolve ('sass-loader'),
    },
    {
      loader: require.resolve ('postcss-loader'),
      Optionen: {
        ident: 'postcss',
        Plugins: () => [
          erfordern ('postcss-flexbugs-fixes'),
          Autoprefixer ({
            Browser: [
              "> 1%",
              "Die letzten 4 Versionen",
              "Firefox ESR",
              "nicht dh <9",
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
  ]
},

Es mag seltsam erscheinen, "css-loader" in der scss-Regel zu haben, aber dies ist notwendig, damit das Webpack das kompilierte CSS richtig handhabt, nachdem es von scss kompiliert wurde.

Edit Webpack Config for Prod
Führen Sie das gleiche Verfahren "Edit Webpack Config" erneut für die Datei config / webpack.config.prod.js aus. Der vorhandene CSS-Block sieht in der Prod-Datei etwas anders aus, aber die Vorgehensweise ist im Grunde dieselbe. Folgen Sie den vorhandenen Mustern in der CSS-Regel, und alles wird gut.

Jetzt sollten Sie in jeder Konfigurationsdatei eine scss-Regel und eine css-Regel haben. Jetzt nichts Besonderes zu tun, als SCSS-Dateien anstelle von CSS zu erstellen. Sie können Ihre alten CSS-Dateien optional in Ihrem Projekt belassen und sie werden mit Ihrem SCSS kombiniert, da Sie Regeln für beide haben!