installing Sass

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`

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';

app/assets/styles/app.scss

@@ -0,0 +1,4 @@
+
+h1 {
+   font-size: 400%;
+}

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",

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"
     },

app/webpack.config.js

@@ -56,7 +56,7 @@ Encore
     })
 
     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()
 
     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()