Wat doet het compileren?
Het compileren van Sass bestanden transformeert stylesheets met Sass-specifieke syntax zoals selector nesting en mixins in normale CSS die kan worden geparsed door browsers.
Hoe instrueer ik het om de .scss bestanden in de map hierboven in de
public/build/css/map te compileren?
Omdat je al Bower gebruikt, wat een Node.js pakket is, neem ik aan dat je geen probleem hebt om het Node.js pakket node-sass te gebruiken in plaats van de originele Ruby versie.
Installeer eerst het pakket met npm i -D node-sass. Maak vervolgens een nieuw script in package.json van uw project:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss is nu uw ingangspunt waar u Bootstrap en uw andere stylesheets importeert.
// 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 */Uitvoeren npm run compile-sass in uw terminal om de compilatie daadwerkelijk uit te voeren.
Moet ik nieuwe .scss-bestanden configureren of kan ik het zo instellen dat ze gewoon aan die sass-map worden toegevoegd?
Sinds u node-sass nooit vertelt om “alles in deze map te compileren” en in plaats daarvan een ingangspuntbestand gebruikt (main.js), wanneer u een nieuw bestand wilt opnemen, voegt u eenvoudig een @import richtlijn toe met een relatief pad er naar toe.
Bonus, hoe vertel ik het om het uitvoerbestand te minifiëren, of niet (zodat ik kan experimenteren met beide manieren)?
Om het resulterende main.css bestand te minifiëren, raad ik csso aan. U kunt het CLI pakket installeren met npm i -D csso-cli en dan een ander script toevoegen aan uw package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"U kunt dan dat script uitvoeren met npm run minify-css. Het geminificeerde bestand zal worden uitgevoerd als main.min.css.