Elm and CSS
In a previous post I described how to use neutrino along with the neutrino-preset-elm package to build production ready Elm applications.
In order to add stylesheets using elm-css, you can use the [email protected] version to support stylesheets
❯ yarn add [email protected]
The preset will look for required files whose name finishes with Stylesheets.elm and load them using elm-css-webpack-loader.
All you have to do in your code is require an elm module that has an elm-css port.
// src/index.js require('./MyAppStylesheets.elm'); var Elm = require('./Main.elm'); Elm.Main.embed(document.getElementById('root'));
An example of the Stylesheets elm module
-- MyAppStylesheets.elm port module Stylesheets exposing (..) import Css.File exposing (CssFileStructure, CssCompilerProgram) import MyCss port files : CssFileStructure -> Cmd msg fileStructure : CssFileStructure fileStructure = Css.File.toFileStructure [ ( "index.css", Css.File.compile [ MyCss.css ] ) ] main : CssCompilerProgram main = Css.File.compiler files fileStructure
