How to automatically build CSS inside a ddev project using node-sass scss in a sidecar container?

Question

I have a Drupal project where I would like to use Node.js build scripts to compile SCSS into CSS.

Answer 1

I use a separate sidecar container that constantly watches for changes to SCSS in my Drupal theme and builds the CSS.

I have a .ddev/docker-compose.sass-watch.yaml file with the following:

version: "3.6"

services:
  sass-watch:
    container_name: ddev-${DDEV_SITENAME}-sass-watch
    image: node:12
    user: $DDEV_UID:$DDEV_GID
    labels:
      com.ddev.site-name: ${DDEV_SITENAME}
      com.ddev.approot: $DDEV_APPROOT
    volumes:
      - type: bind
        source: ../drupal/web/themes/custom/MY_THEME
        target: /app
        consistency: cached
      - ".:/mnt/ddev_config:ro"
    working_dir: /app
    command: ["sh", "-c", "npm i && npm run watch"]

Then inside my theme directory I have a package.json as follows:

{
  "name": "MY_THEME",
  "scripts": {
    "build": "node-sass scss -o css --output-style compressed",
    "watch": "node-sass scss -o css --output-style compressed --source-map true -w"
  },
  "dependencies": {
    "node-sass": "^4.14.1"
  }
}

The watch command runs permanently in the background while my ddev project is running.

I can also use ddev logs -s sass-watch to get the output from the watch command if the build doesn't look like it has worked for some reason.