How can I add css and font files to the head?

Learn
1

I’m currently adding my css like this:

css path =
    node "link" [ rel "stylesheet", href path ] []

view : Model -> Html Msg
view model =
    div []
        [ css "css/normalize.css"
        , css "css/styles.css"
        ...

which I like because I can just edit css in a regular css file, but of course the script is linked inside the div element. How can I link everything in the head?

Edit: What I decided to do was add the link tags to a custom HTML file and output elm to JS instead of HTML. I’m also using elm-live to serve everything. All my static files live in a dist folder. This includes css, images, main.js, and index.html. Then I run this command:
elm-live src/Main.elm --open --dir=./dist -- --output=./dist/main.js

2

You can’t.

But perhaps you should reconsider the use of separate CSS files. It’s a bit of change, but I’m slowly leaning toward this myself. The link between separate CSS and code is not strong. It’s very easy, over time, to end up with CSS that is no longer being used. CSS in code doesn’t have that problem.

3

Why don’t you add the link tags in the HTML file in the head tag? That way the browser can start loading the CSS files and your Elm generated HTML will be properly styled on render.

If you add the link tags in Elm they won’t be attached to the DOM until the JS has been parsed and the Elm code has executed, which means the browser doesn’t see them until then, and you may get a FOUC (Flash Of Unstyled Content) in real internet connections (in local development you probably won’t see it).

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.