Watching css files?

[TheOddler]

I have a setup with some css files next to my elm files. However, elm-live only seems to watch the elm files, and not the css files.

When starting elm-live it says

Watching the following files:
    - src/**/*.elm

Is there a way to tell elm-live to also watch the css files?

[y047aka]

I have the same question on elm-live v4.

Until v3.4.1, elm-live performed live reloading in response to changes in CSS files in the directory. Using that feature, I was able to easily develop Elm applications. Actually, elm-starfighter is my template that allows you to develop Elm applications without module bundler. It was a great experience. Thanks elm-live!!

As @TheOddler says, it seems that only ".elm" is monitored for "live reload" since v4.0.0 was released. (Manual reload can be used in the same way as v3)

Is it possible to use the same function in v4 in the future?

[sw00d]

Same question here. It would almost completely abolish my need for webpack, if elm-live v4 supported live css updates (as well as sass/scss if we're getting really fancy).

[wking-io]

This sounds like a good feature! We can add that in. If anyone would like to take a stab at it go for it. Otherwise, I will get to it during my next round of updates. :)

[davnn]

Have a look at my PR (https://github.com/wking-io/elm-live/pull/227) to test this feature and/or improve it.

[TSFoster]

For people who want this in the meantime, you can achieve something similar with a bit of a hack. Watch the dir/file for changes and touch an unimported dummy elm file whenever it changes.

Examples:

echo static/main.css | entr -rp touch src/DummyFile.elm

watchexec --watch build/css touch src/DummyFile.elm

Here's a simplified version of a Makefile in a project I'm working on, which lets me use make dev to start elm-live and scss --watch, and trigger a reload when the css changes:

.PHONY: dev dev/elm dev/scss dev/csstrigger

dev:
    $(MAKE) -j3 dev/elm dev/scss dev/csstrigger

dev/elm:
    elm-live src/Main.elm --pushstate --open --dir static -- --output=static/main.js

dev/scss:
    scss --watch scss/main.scss:static/main.css

dev/csstrigger:
    echo static/main.css | entr -rp touch src/DummyFile.elm

NOTE: This won't work without some client-side JS if you are using --hot

[weickmanna]

Based on the work above from @TSFoster, I created a bash script. We use IntelliJ and Gradle. So we have a Gradle run configuration for elm live, and we configured it such that it will automatically run the watch script beforehand.

Attention: To prevent duplicate watches I kill all the existing entr processes beforehand. Use at your own discretion.

Make sure to include CssWatchDummyFile.elm in .gitignore

#!/bin/bash

SCRIPT_DIR="$(dirname "$0")"
SCRIPT_NAME=$(basename "$0")

watch() {
  FILE=$1
  echo "$FILE" | entr -rp touch "$SCRIPT_DIR/frontend/src/CssWatchDummyFile.elm"
}

echoDemarcation() {
  TEXT=$1
  echo
  echo "--------------------------------------------------------------------------"
  echo "$SCRIPT_NAME: $TEXT"
  echo "--------------------------------------------------------------------------"
}

echoDemarcation "Killing existing css watches ..."
pgrep -f "entr" | xargs kill -9
while pgrep -f "entr" | grep "entr"; do : ; done

echoDemarcation "Set up new css watches ..."
while read -r file; do
  echo "Watching $file ..."
  watch "$SCRIPT_DIR/frontend/css/$file" &
done < <(ls "$SCRIPT_DIR/frontend/css")

[laurentpayot]

I use the touch trick with chokidar-cli in the following npm script to compile my sass files and refresh css files in elm-live:

"watch:style": "chokidar 'src/style/**/*.sass' -c 'node-sass src/style/main.sass dist/main.css --include-path node_modules --source-map-embed --source-map-contents && touch src/elm/Main.elm' --initial",

[tankorsmash]

Would be nice to have this supported natively with a flag