embedded Bootstrap inside webpack

build.gradle

@@ -126,6 +126,7 @@ tasks.named('deploy2Wildfly', Deploy2WildflyTask) { d2w ->
     d2w.rpcUsername = 'woggioni'
 //    d2w.rpcUsername = 'admin'
     d2w.rpcPassword = '123456'
+    d2w.deploymentName = 'jpacrepo.war'
 }
 
 

gradle.properties

@@ -1,3 +1,3 @@
-jpacrepo.version=2024.02.22
+jpacrepo.version=2024.02.24
 
-lys.version=2024.02.22
+lys.version=2024.02.24

jpacrepo-frontend/build.gradle

@@ -1,6 +1,6 @@
 plugins {
     alias(catalog.plugins.kotlin.multiplatform)
-    id "org.jetbrains.kotlin.plugin.serialization" version "1.9.22"
+    alias(catalog.plugins.kotlin.serialization)
 }
 
 
@@ -19,10 +19,14 @@ kotlin {
             dependencies {
                 implementation catalog.klevtree
                 implementation group: 'org.jetbrains.kotlinx', name: 'kotlinx-serialization-json', version: '1.6.2'
-//                implementation(npm("bootstrap", "5.3.2"))
+
-//                implementation(npm("bootstrap-icons", "1.11.3"))
+                implementation(npm("bootstrap", "5.3.2"))
-//                implementation(npm("style-loader", "3.3.4"))
+                implementation(npm("bootstrap-icons", "1.11.3"))
-//                implementation(npm("css-loader", "6.10.0"))
+                implementation(npm("style-loader", "3.3.4"))
+                implementation(npm("css-loader", "6.10.0"))
+                implementation(npm("postcss-loader", "8.1.0"))
+                implementation(npm("sass", "1.71.1"))
+                implementation(npm("sass-loader", "14.1.1"))
             }
         }
     }
@@ -30,7 +34,10 @@ kotlin {
         browser {
             runTask {
                 sourceMaps = true
-                devServer.port = 8080
+                devServer.port = 5080
+                cssSupport {
+                    enabled.set(false)
+                }
             }
             webpackTask {
                 sourceMaps = false

jpacrepo-frontend/src/jsMain/kotlin/net/woggioni/jpacrepo/Main.kt

@@ -370,6 +370,7 @@ private fun HtmlBuilder.buildPackageSearchSection(commonElement: Element) {
 }
 
 fun main(vararg args: String) {
+    js("require ('./scss/styles.scss');")
     HtmlBuilder.of(document, document.body as HTMLElement) {
         main { main ->
             div {

jpacrepo-frontend/src/jsMain/resources/index.html

@@ -4,15 +4,7 @@
         <meta charset="utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <link rel="stylesheet" href="css/jpacrepo.css"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-              rel="stylesheet"
-              integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
-              crossorigin="anonymous"/>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-                integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
-                crossorigin="anonymous"></script>
         <script src="jpacrepo-frontend.js" defer="true"></script>
-        <title>Hello World!</title>
+        <title>Jpacrepo</title>
     </head>
 </html>

jpacrepo-frontend/src/jsMain/resources/scss/styles.scss

@@ -0,0 +1,2 @@
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-icons/font/bootstrap-icons.min.css";

jpacrepo-frontend/webpack.config.d/bootstrap.js

@@ -0,0 +1,3 @@
+config.module.rules.push({test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, type: 'asset'});
+config.module.rules.push({test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, type: 'asset'});
+config.module.rules.push({test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, type: 'asset/resource'});

jpacrepo-frontend/webpack.config.d/css.js

@@ -0,0 +1 @@
+config.module.rules.push({ test: /\.css$/, use: ["style-loader", { loader: "css-loader", options: {sourceMap: false} } ] });

jpacrepo-frontend/webpack.config.d/sass.js

@@ -0,0 +1,2 @@
+config.module.rules.push({ test: /\.s[ac]ss$/, use: ["style-loader", { loader: "css-loader", options: {sourceMap: false} }, "sass-loader" ] });
+