Search code examples
elm

How can I maintain stylesheets during Elm development?


I'm new to Elm and trying to build a web app with elm-html. I'm having trouble setting up my workflow to develop and see my results quickly.

I've used elm-reactor to serve and reload my changes but that serves my app from localhost:8000/Foo.elm which doesn't include any external stylesheets. I have to use inline styles for all my components, which is discouraged by most HTML guidelines. I'd rather use CSS (or a CSS preprocessor).

I can use elm-make to build to a *.js file and include that in an index.html that I maintain, but it won't watch changes.

Is it the wrong approach to include CSS files in an Elm project, and if not, how do I maintain stylesheets outside of Elm and still serve my project locally, while watching for changes?


Solution

  • You're probably better off not using elm-reactor for your main development because of those limitations. It is perfectly acceptable to use your own external CSS file and I agree, that's a much better practice than embedding styling in the output html.

    I've used gulp and the gulp-elm package to set up a file watching task that compiles all Elm code (as well as SCSS files) on save, and that works wonderfully.

    There is a Grunt plug-in for Elm if you're into that.

    There is a webpack loader for Elm if you prefer that over gulp or grunt.

    There is a young project that offers a Single Page Application generator for Yeoman which bundles together some of the live-reloading tasks. It is very opinionated on some of the decisions it makes, but it's a good reference if you want to get running quickly.