Use url loader to put in one file

package-lock.json

@@ -14,6 +14,7 @@
         "sass": "^1.35.2",
         "sass-loader": "^12.1.0",
         "style-loader": "^3.1.0",
+        "url-loader": "^4.1.1",
         "webpack": "^5.45.1",
         "webpack-cli": "^4.7.2"
       }
@@ -1675,6 +1676,33 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3077,6 +3105,17 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "sass": "^1.35.2",
     "sass-loader": "^12.1.0",
     "style-loader": "^3.1.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.45.1",
     "webpack-cli": "^4.7.2"
   }

src/index.js

@@ -5,6 +5,8 @@ import BasicCanvas from './js/basic_canvas.js';
 import Room from './js/room.js';
 /* SCSS */
 import './styles/uno-game.scss';
+/* Image */
+import green_table from './images/green_table.jpg';
 
 // Global variables
 global.canvas_count = 0; // increment number to avoid the same canvas id
@@ -23,7 +25,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Create background canv
   const bkg = new BasicCanvas(0, 0, global.uno_game_w, global.uno_game_h);
-  bkg.canvas.classList.add('uno-game-canv-bkg');
+  bkg.canvas.style.backgroundImage = 'url(' + green_table +')';
 
   // Create UNO title
   const title = document.createElement('h1');

src/styles/uno-game.scss

@@ -11,9 +11,6 @@
 }
 
 /* Main view */
-.uno-game-canv-bkg {
-  background-image: url('../images/green_table.jpg');
-}
 .uno-game-title {
   position: absolute;
   left: 0;

webpack.config.js

@@ -18,7 +18,12 @@ module.exports = {
       },
       {
         test: /\.(png|svg|jpe?g|gif)$/i,
-        type: 'asset/resource',
+        //type: 'asset/resource',
+        use: [
+          {
+            loader: 'url-loader',
+          },
+        ],
         //use: [
         //  {
         //    loader: 'file-loader',