Add DartSass to build scss assets

To build scss assets in Phoenix 1.6 we need to use DartSass alongside esbuild

Author: samuelpordeus

.gitignore

@@ -77,5 +77,8 @@ tags
 [._]*.un~
 
 /assets/node_modules/
-/priv/static/
+/priv/static/assets/
+/priv/static/robots-*
+/priv/static/robots.txt.gz
+/priv/static/cache_manifest.json
 # End of https://www.gitignore.io/api/elixir,osx,vim,linux

assets/.babelrc

@@ -21,7 +21,7 @@ $primary: $link;
 $footer-background-color: $link;
 $footer-padding: 2rem 1.5rem 2rem;
 
-@import "bulma";
+@import "../node_modules/bulma/bulma.sass";
 @import "libs/_mixins";
 @import "libs/_ribbon";
 @import "errors";

assets/css/app.scss

@@ -1,14 +1,23 @@
-// We need to import the CSS so that webpack will load it.
-// The MiniCssExtractPlugin is used to separate it out into
-// its own CSS file.
-import css from "../css/app.scss";
-
-// webpack automatically bundles all modules in your
-// entry points. Those entry points can be configured
-// in "webpack.config.js".
+// We import the CSS which is extracted to its own file by esbuild.
+// Remove this line if you add a your own CSS build pipeline (e.g postcss).
+
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
 //
-// Import dependencies
+//     import "../vendor/some-package.js"
 //
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
 import "phoenix_html";
 import * as jsDiff from "diff";
 import { Socket } from "phoenix";