fix: fixed bug of undp bulma css building. use sass to build (#4755)

Author: JinIgarashi

.changeset/late-suns-poke.md

@@ -0,0 +1,5 @@
+---
+"@undp-data/undp-bulma": patch
+---
+
+fix: fixed bug of undp bulma css building. use sass to build

packages/undp-bulma/bulma.scss

@@ -7,6 +7,9 @@ $undp_gray_light: hsl(0, 0%, 71%);
 $undp_font: '"ProximaNova", sans-serif';
 $black: #000;
 
+// SDG icons
+@use "./sdgs.scss";
+
 @use "bulma/sass/utilities/initial-variables.scss" as iv with (
   // revert basic colors to 0.9.4
   $orange: hsl(14, 100%, 53%),
@@ -25,7 +28,7 @@ $black: #000;
   $radius: 0,
   $radius-medium: 0,
   $radius-large: 0,
-  $radius-rounded: 0
+  // $radius-rounded: 0
 );
 
 @use "bulma/sass/utilities/derived-variables.scss" as dv
@@ -267,9 +270,6 @@ button {
   }
 }
 
-// SDG icons
-@import "./sdgs.scss";
-
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
 // import Material Icons
 // to see this for adding another icon family.

packages/undp-bulma/package.json

@@ -4,6 +4,16 @@
   "description": "This package is to manage customised Bulma css for UNDP GeoHub",
   "type": "module",
   "main": "bulma.scss",
+  "exports": {
+    ".": {
+      "import": "./dist/undp-bulma.css",
+      "require": "./dist/undp-bulma.css"
+    },
+    "./dist/undp-bulma.css": {
+      "import": "./dist/undp-bulma.css",
+      "require": "./dist/undp-bulma.css"
+    }
+  },
   "files": [
     "dist",
     "!dist/**/*.js",
@@ -14,7 +24,9 @@
   "private": false,
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && copyfiles -u 2 'assets/sdgs/*' dist/assets/sdgs",
+    "build": "npm run package:scss && npm run package:copyassets",
+    "package:scss": "sass --load-path=node_modules bulma.scss dist/undp-bulma.css",
+    "package:copyassets": "copyfiles -u 2 'assets/sdgs/*' dist/assets/sdgs && copyfiles -u 2 'assets/fonts/*' dist/assets/fonts",
     "preview": "vite preview"
   },
   "repository": {

packages/undp-bulma/src/main.ts

@@ -40,6 +40,10 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
 
   <button class="button is-link">Secondary color Button</button>
 
+  <button class="button is-link is-rounded">Primary color Button</button>
+
+  <button class="button is-loading is-link" disabled>Disabled color Button</button>
+
   <button class="button is-primary" disabled>Disabled color Button</button>
 
   <button class="button is-small">Small Button</button>