Ich versuche, die create-react-app mit der Unterstützung von sass / scss zu ergänzen.
Also habe ich diese Schritte gemacht:
npm eject npm install sass-loader node-sass --save-dev Öffnen Sie die Datei webpack.config.dev.js und fügen Sie sie dem Abschnitt loaders hinzu:
%Vor% In meiner app.js-Datei verweise ich auf eine scss-Datei: import './css/app.scss';
Wenn ich npm start ausführe, kompiliert alles ohne Fehler, aber die Anwendung lädt ohne Styling.
Was fehlt mir?
Ich bin gerade durchgegangen und es scheint, dass viele Leute verloren sind oder nicht die richtige Antwort gefunden haben. Das habe ich gemacht:
npm run eject
Wenn Sie diesen Befehl ausführen, werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, da Sie all das in einem npm-Modul namens react-script notiert haben. Verändern Sie dieses Paket nicht direkt!
npm install sass-loader node-sass --save-dev
An dieser Stelle müssen Sie den Sass-Compiler und den Webpack-Loader als Entwicklungsabhängigkeiten installieren.
config\webpack.config.dev.js . Fügen Sie /\.scss$/, dem Ausschluss-Array im URL-Loader hinzu. Nach dem Update sieht es so aus:
Fügen Sie den SASS / SCSS-Loader hinzu:
%Vor%Koala ist ein Sass, weniger etc .. Compiler. Sie können hierfür beliebige Tools Ihrer Wahl verwenden.
Fügen Sie den Quellordner mit allen Ihren SCSS-Dateien zu Koala hinzu. Es überwacht alle Änderungen an Ihren Sass-Dateien und generiert sofort die kompilierte CSS-Version.
Verwenden Sie die von Koala erstellte CSS-Datei direkt in Ihrem Projekt.
%Vor%Tags und Links reactjs webpack create-react-app