How to use a separate CSS file with elm?

user_1126971 0
Viewed 478

Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="spectre.min.css">
    <script src="elm.js"></script>
  </head>
  <body>
    <div id="elm-app-is-loaded-here"></div>
    <script>
      var app = Elm.Main.init({
        node: document.getElementById("elm-app-is-loaded-here")
      });      
    </script>
  </body>
</html>

What if I want to use a Browser.Document instead, or even a Browser.Application ?

When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?

elm css
1 Answers

If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.

I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).

user_6239190
Related