Refine css generation and font reference (#188)

* refactor: Ensure app.scss is converted and copied to priv/static in one command * refactor: Add bootstrap-icon font * refactor: Remove unnecessary slash * style: Increase readability * refactor: Relative path not necessary as node_modules is loaded by dart-sass * chore: upgrade esbuild and dart_sass --------- Co-authored-by: nwittstruck <[email protected]>
b310-digital · Mar 28, 2024 · ab82757 · ab82757
1 parent a661b3f
commit ab82757
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 13 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,7 +1,3 @@
-// This file will be generated by dart_sass - this is the compiled css file:
-// We include this here, so esbuild can handle e.g. copying fonts to the /priv/static/assets directory
-import "../scss/app.css";
-
 import { Modal, Tooltip } from "bootstrap"
 
 // activate all tooltips:

diff --git a/assets/scss/_bootstrap_custom.scss b/assets/scss/_bootstrap_custom.scss
@@ -1,5 +1,5 @@
 // Required
-@import "../node_modules/bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 .card-body-mindwendel-idea {
   @extend .card-body;

diff --git a/assets/scss/app.scss b/assets/scss/app.scss
@@ -1,10 +1,10 @@
 /* This file is for your main application css. It will be compiled to app.css, which is then loaded by esbuild. */
-@import "../node_modules/nprogress/nprogress";
+@import "nprogress/nprogress";
 @import "_bootstrap_custom.scss";
 
-$bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts/";
+$bootstrap-icons-font-dir: "/fonts/bootstrap-icons";
 
-@import "../node_modules/bootstrap-icons/font/bootstrap-icons";
+@import "bootstrap-icons/font/bootstrap-icons";
 @import "live/idea_live/_index_component.scss";
 
 @import "live/brainstorming_live/_show.scss";

diff --git a/config/config.exs b/config/config.exs
@@ -37,18 +37,28 @@ config :logger, :console,
 config :phoenix, :json_library, Jason
 
 config :esbuild,
-  version: "0.19.11",
+  version: "0.20.2",
   default: [
-    args:
-      ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets --external:/images/* --loader:.woff=file --loader:.woff2=file),
+    args: ~w(
+      js/app.js
+      --bundle
+      --target=es2016
+      --outdir=../priv/static/assets
+      --external:/images/*
+      --loader:.woff=file
+      --loader:.woff2=file
+    ),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 config :dart_sass,
-  version: "1.69.7",
+  version: "1.72.0",
   default: [
-    args: ~w(scss/app.scss scss/app.css),
+    args: ~w(
+      scss/app.scss:../priv/static/assets/app.css
+      --load-path=node_modules
+    ),
     cd: Path.expand("../assets", __DIR__)
   ]
 

diff --git a/priv/static/fonts/bootstrap-icons/bootstrap-icons.woff b/priv/static/fonts/bootstrap-icons/bootstrap-icons.woff
diff --git a/priv/static/fonts/bootstrap-icons/bootstrap-icons.woff2 b/priv/static/fonts/bootstrap-icons/bootstrap-icons.woff2