From a0ecf6de88d4d77b301c400df114cf8095f39ba8 Mon Sep 17 00:00:00 2001
From: Tchama <mat@collectifs.net>
Date: Thu, 18 Feb 2021 21:39:43 +0100
Subject: [PATCH] installing Sass

---
 README.md                  |  4 ++++
 app/assets/app.js          |  3 +++
 app/assets/styles/app.scss |  4 ++++
 app/package-lock.json      | 25 +++++++++++++++++++++++++
 app/package.json           |  2 ++
 app/webpack.config.js      |  2 +-
 6 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/styles/app.scss

diff --git a/README.md b/README.md
index d7f1c7d..18a9d4d 100644
--- a/README.md
+++ b/README.md
@@ -102,3 +102,7 @@ Disclaimer: This project has been generated on phpdocker.io
    * `npm install --force`
 * puis je lance (ce qu'il faudra faire à chaque fois):
    * `yarn encore dev-server`
+
+## Sass
+
+* dans le container node, installation de sass: `npm install sass-loader@^11.0.0 sass --save-dev`
diff --git a/app/assets/app.js b/app/assets/app.js
index bb0a6aa..1c1c8ae 100644
--- a/app/assets/app.js
+++ b/app/assets/app.js
@@ -8,5 +8,8 @@
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
 
+// SCSS
+import './styles/app.scss';
+
 // start the Stimulus application
 import './bootstrap';
diff --git a/app/assets/styles/app.scss b/app/assets/styles/app.scss
new file mode 100644
index 0000000..562a9c7
--- /dev/null
+++ b/app/assets/styles/app.scss
@@ -0,0 +1,4 @@
+
+h1 {
+   font-size: 400%;
+}
diff --git a/app/package-lock.json b/app/package-lock.json
index e4288d7..8ca1fdc 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -4185,6 +4185,12 @@
             "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
             "dev": true
         },
+        "klona": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+            "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+            "dev": true
+        },
         "loader-runner": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -7247,6 +7253,25 @@
             "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
             "dev": true
         },
+        "sass": {
+            "version": "1.32.7",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.7.tgz",
+            "integrity": "sha512-C8Z4bjqGWnsYa11o8hpKAuoyFdRhrSHcYjCr+XAWVPSIQqC8mp2f5Dx4em0dKYehPzg5XSekmCjqJnEZbIls9A==",
+            "dev": true,
+            "requires": {
+                "chokidar": ">=2.0.0 <4.0.0"
+            }
+        },
+        "sass-loader": {
+            "version": "11.0.1",
+            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
+            "integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
+            "dev": true,
+            "requires": {
+                "klona": "^2.0.4",
+                "neo-async": "^2.6.2"
+            }
+        },
         "sax": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
diff --git a/app/package.json b/app/package.json
index a52fbd7..6a9af93 100644
--- a/app/package.json
+++ b/app/package.json
@@ -4,6 +4,8 @@
         "@symfony/webpack-encore": "^1.0.0",
         "core-js": "^3.0.0",
         "regenerator-runtime": "^0.13.2",
+        "sass": "^1.32.7",
+        "sass-loader": "^11.0.1",
         "stimulus": "^2.0.0",
         "webpack-notifier": "^1.6.0"
     },
diff --git a/app/webpack.config.js b/app/webpack.config.js
index 056b04a..24bc396 100644
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@@ -56,7 +56,7 @@ Encore
     })
 
     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()
 
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()