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.