Our great sponsors
-
-
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
Initially I just copied and pasted all the snippets thoughtlessly and one issue occurred. Because I use both phoenixframework/esbuild and CargoSense/dart_sass and they both output the CSS build result to the same file priv/static/assets/app.css, which means they keep on overriding that same file.
One day I was trying to upgrade one of my Phoenix 1.5 apps to Phoenix 1.6. In that app, I customize Bootstrap styles using SCSS. I want to talk about what I found and stumbled on when setting up SCSS.
# config/config.exs ... # Configure esbuild (the version is required) config :esbuild, version: "0.14.1", default: [ args: [ "js/app.js", "--bundle", "--target=es2016", "--outdir=../priv/static/assets", "--external:/fonts/*", "--external:/images/*" ], cd: Path.expand("../assets", __DIR__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ] # https://github.com/CargoSense/dart_sass config :dart_sass, version: "1.44.0", default: [ args: ["scss/index.scss", "scss/index.css"], cd: Path.expand("../assets", __DIR__) ] ...