Update assets files and yarn upgrade dependencies

assets/app.js

@@ -7,6 +7,7 @@
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
+import './styles/app.scss';
 
 // start the Stimulus application
 import './bootstrap';

assets/css/app.css

@@ -1,21 +0,0 @@
-/* the ~ allows you to reference things in node_modules */
-@import "~bootstrap/dist/css/bootstrap.css";
-
-body {
-  background-color: floralwhite !important;
-  color: #312f31 !important;
-  /*-- pour demarrer sous la navbar fixe --*/
-  padding-top: 7em;
-}
-
-#content-wrap {
-  min-height: 700px;
-}
-
-#footer {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 1em;
-  background-color: #efefef;
-}

assets/js/app.js

@@ -1,23 +0,0 @@
-/*
- * Welcome to your app's main JavaScript file!
- *
- * We recommend including the built version of this JavaScript file
- * (and its CSS file) in your base layout (base.html.twig).
- */
-
-// any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
-import '../scss/global.scss';
-
-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-import $ from 'jquery';
-
-// this "modifies" the jquery module: adding behavior to it
-// the bootstrap module doesn't export/return anything
-import 'bootstrap';
-
-// or you can include specific pieces
-// require('bootstrap/js/dist/tooltip');
-// require('bootstrap/js/dist/popover');
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

assets/js/pdf.js

@@ -1 +0,0 @@
-import '../css/pdf.css';

assets/pdf.js

@@ -0,0 +1 @@
+import './styles/pdf.css';

assets/styles/app.css

@@ -1,3 +1,21 @@
+/* the ~ allows you to reference things in node_modules */
+@import "~bootstrap/dist/css/bootstrap.css";
+
 body {
-    background-color: lightgray;
+  background-color: floralwhite !important;
+  color: #312f31 !important;
+  /*-- pour demarrer sous la navbar fixe --*/
+  padding-top: 7em;
+}
+
+#content-wrap {
+  min-height: 700px;
+}
+
+#footer {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1em;
+  background-color: #efefef;
 }

package.json

@@ -5,11 +5,12 @@
         "bootstrap": "^4.5.3",
         "copy-webpack-plugin": "^6.2.1",
         "core-js": "^3.0.0",
+        "file-loader": "6.0.0",
         "jquery": "^3.5.0",
         "node-sass": "^4.14.1",
         "popper.js": "^1.16.1",
         "regenerator-runtime": "^0.13.2",
-        "sass-loader": "8.0.0",
+        "sass-loader": "10.0.0",
         "stimulus": "^2.0.0",
         "webpack-notifier": "^1.6.0"
     },

webpack.config.js

@@ -35,8 +35,8 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.js')
-    .addEntry('pdf', './assets/js/pdf.js')
+    .addEntry('app', './assets/app.js')
+    .addEntry('pdf', './assets/pdf.js')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     .enableStimulusBridge('./assets/controllers.json')