Mit csinál a fordítás?
A Sass fájlok fordítása a Sass-specifikus szintaxissal rendelkező stíluslapokat, mint például a szelektorok és mixins, normál CSS-é alakítja át, amelyet a böngészők elemezni tudnak.
Hogyan utasíthatom, hogy fordítsa le a fenti mappában lévő .scss fájlokat a
public/build/css/mappában?
Mivel már használja a Bower-t, ami egy Node.js csomag, feltételezem, hogy nem okoz gondot a Node.js csomag használata az eredeti Ruby verzió helyett.
Először is telepítse a csomagot a npm i -D node-sass segítségével. Ezután hozz létre egy új szkriptet a projekted package.json belsejében:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"main.scss ez most a belépési pontod, ahová importálod a Bootstrap-et és a többi stíluslapodat.
// 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 */Végül, hogy ténylegesen futtasd a fordítást, futtasd a npm run compile-sass-et a terminálodban.
Meg kell konfigurálnom az új .scss fájlokat, vagy beállíthatom úgy, hogy csak hozzáadjam őket ahhoz a sass mappához?
Mivel soha nem mondod meg a node-sass-nek, hogy “mindent ebben a mappában fordítson le”, hanem egy belépési pontfájlt használsz (main.js), amikor egy új fájlt akarsz felvenni, egyszerűen adj hozzá egy @import direktívát egy relatív elérési úttal.
Bonusz, hogyan mondjam meg neki, hogy minifikálja a kimeneti fájlt, vagy ne minifikálja (így mindkét móddal kísérletezhetek)?
A keletkező main.css fájl minifikálásához a csso ajánlom. A CLI csomagját a npm i -D csso-cli segítségével telepítheti, majd egy másik szkriptet adhat hozzá a package.json-hez:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"Ezt a szkriptet a npm run minify-css segítségével futtathatja. A kicsinyített fájl main.min.css.
néven fog kikerülni.