Wie kompiliert man SASS .scss-Dateien in der einfachsten Methode (ohne Framework)

Was bewirkt das Kompilieren?

Das Kompilieren von Sass-Dateien verwandelt Stylesheets mit Sass-spezifischer Syntax wie Selektorverschachtelung und Mixins in normales CSS, das von Browsern geparst werden kann.

Wie weise ich es an, die .scss-Dateien im Ordner oben im Ordner public/build/css/ zu kompilieren?

Da du bereits Bower verwendest, das ein Node.js-Paket ist, nehme ich an, dass du kein Problem damit hast, das Node.js-Paket node-sass anstelle der ursprünglichen Ruby-Version zu verwenden.

Erst installierst du das Paket mit npm i -D node-sass. Dann erstellen Sie ein neues Skript in Ihrem Projekt package.json:

"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"

main.scss ist nun Ihr Einstiegspunkt, an dem Sie Bootstrap und Ihre anderen Stylesheets importieren.

// I don't know whether this path is correct// Just find out the location of "_bootstrap.scss" and then create the relative path@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";/* Your custom SCSS */

Schließlich führen Sie npm run compile-sass in Ihrem Terminal aus, um die Kompilierung tatsächlich auszuführen.

Muss ich neue .scss-Dateien konfigurieren oder kann ich es so einstellen, dass sie einfach dem sass-Ordner hinzugefügt werden?

Da man node-sass niemals anweist, „alles in diesem Ordner zu kompilieren“ und stattdessen eine Einstiegsdatei (main.js) verwendet, fügt man, wenn man eine neue Datei einbinden will, einfach eine @import-Direktive mit einem relativen Pfad zu ihr hinzu.

Bonus, wie sage ich, dass die Ausgabedatei verkleinert werden soll oder nicht (damit ich mit beiden Möglichkeiten experimentieren kann)?

Um die resultierende main.css-Datei zu verkleinern, empfehle ich csso. Sie können das CLI-Paket mit npm i -D csso-cli installieren und dann ein weiteres Skript zu Ihrem package.json hinzufügen:

"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"

Das Skript können Sie dann mit npm run minify-css ausführen. Die verkleinerte Datei wird als main.min.css.

ausgegeben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.