Sass mit node-sass (Node.js) - Versionsgeschichte

Steff am 4. Juli 2018 um 09:33 Uhr

2018-07-04T09:33:17Z

2018-07-04T09:27:57Z

Sass Watcher hinzufügen

2018-07-04T09:27:28Z

Sass Watcher hinzufügen

2018-07-04T09:26:08Z

2018-07-04T09:01:34Z

Sass Watcher hinzufügen

2018-07-04T08:52:30Z

Tutorial: Kurz und schmerzlos

2018-07-04T08:41:50Z

2018-07-04T08:27:56Z

Tutorial: Kurz und schmerzlos

2018-07-04T08:00:11Z

2018-07-04T06:35:04Z

← Nächstältere Version		Version vom 4. Juli 2018, 09:33 Uhr
Zeile 99:		Zeile 99:

	=== Tutorial: Ein Projekt mit SASS und dem NodeJS Server ===		=== Tutorial: Ein Projekt mit SASS und dem NodeJS Server ===
		+	Hinweis: Veraltet, aber ein paar interessante Konzepte drin.
		+
	Ziel ist ein einfach aber effektiv zu handelndes Projekt ohne die Nutzung von gulp.js nur '''mit npm Skripten'''.		Ziel ist ein einfach aber effektiv zu handelndes Projekt ohne die Nutzung von gulp.js nur '''mit npm Skripten'''.

@@ Zeile 95: / Zeile 95: @@
 Watcher ausführen:
   npm run sass-watch
 === Tutorial: Ein Projekt mit SASS und dem NodeJS Server  ===

@@ Zeile 87: / Zeile 87: @@
      "test": "echo \"Error: no test specified\" && exit 1",
      "sass-compile": "node-sass --include-path sass scss/styles.scss css/styles.css",
-     "sass-compile-folder": "node-sass scss/ -o css/",
+     "sass-compile-all": "node-sass scss/ -o css/",
      "sass-watch":"node-sass --watch --include-path sass scss/styles.scss css/styles.css",
-     "sass-watch-folder": "node-sass --watch scss -o css"
+     "sass-watch-all": "node-sass --watch scss -o css"
    },
 </pre>
 === Tutorial: Ein Projekt mit SASS und dem NodeJS Server  ===

@@ Zeile 21: / Zeile 21: @@
 === SCSS Files Kompilieren ===
   node-sass --include-path sass INPUT_FILE.scss OUTPUT_FILE.css
 == Tutorials ==
@@ Zeile 57: / Zeile 82: @@
 ==== Sass Watcher hinzufügen ====
-Im Package.json
+Im Package.json bauen wir Varianten um Watcher hinzuzufügen. Am besten gleich noch einen um den ganzen Ordner zu kompilieren. I.d.R. werden wir aber nur das Skript sss-watch brauchen die -folder Beispiele dienen nur zur Illustration
 <pre>
-"node-sass --watch scss -o css"
+  "scripts": {
 </pre>

@@ Zeile 59: / Zeile 59: @@
 Im Package.json
 <pre>
 </pre>

@@ Zeile 25: / Zeile 25: @@
 === Tutorial: Kurz und schmerzlos ===
 Eine Praxistaugliches Beispiel mit einer Variante die ohne nodeamon und ohne Package.json auskommt
 Im Projektordne Basisstruktur anlegenr:
   mkdir scss css js images
   npm init
   npm install -D node-sass
 Installiert node-sass mit allen tools im Projektordner unter node-modules (wir verwenden also node-sass lokal)
 In Package.json Compiler Shortcut eintragen:
@@ Zeile 44: / Zeile 42: @@
    },
 </pre>
 Ausführen mit:
   npm run sass-compile
 === Tutorial: Ein Projekt mit SASS und dem NodeJS Server  ===

← Nächstältere Version		Version vom 4. Juli 2018, 08:41 Uhr
Zeile 1:		Zeile 1:
		+	== Beispiel Dateien ==
		+	[[:File:normalize.scss]]
		+	[[:File:skeleton.scss]]
	== Links ==		== Links ==
	https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275		https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

@@ Zeile 3: / Zeile 3: @@
 == Quickstart ==
 === Installation ===
 * Node.js mit dem npm Paketmanager sollte installiert sein
 * node-sass Installieren falls noch nicht vorhanden:
   npm install node-sass
-* Variante:
   npm install -D node-sass
-Mit der -D Option schreibt npm die Abhängigkeit gleich in ein Package.json File wenn man das nutzen will (vorher mit npm init anlegen)
+Mit der -D Option schreibt npm die Abhängigkeit gleich in ein Package.json File wenn man das nutzen will (vorher mit npm init anlegen). Im Ordner node-modules werden auch die binaries abgelegt.
   npm install --save-dev node-sass
 == Tutorials ==
 === Tutorial: Kurz und schmerzlos ===
 Eine Praxistaugliches Beispiel mit einer Variante die ohne nodeamon und ohne Package.json auskommt
+Package.json anlegen
- mkdir scss css js images bin
+  npm init
 === Tutorial: Ein Projekt mit SASS und dem NodeJS Server  ===
@@ Zeile 31: / Zeile 43: @@
 * main scss File
   touch scss/main.scss
 ==== node-sass und nodeamon installieren ====
   npm install -D node-sass nodemon