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.

Hippocras

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.

Hippocras

Answer 2

node-sass is no longer maintained and has an issue where it doesn't pick up new filenames while watching. Here's an updated version of Dave's answer that uses the more current "dart sass":

docker-composer.*.yaml

version: "3.8"

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
      - ".:/mnt/ddev_config:ro"
    working_dir: /app
    command: [ "sh", "-c", "npm i &&  npm run watch" ]

package.json

{
  "name": "MY_THEME",
  "scripts": {
    "build": "sass scss css",
    "watch": "sass scss:css -w"
  },
  "dependencies": {
    "sass": "^1.49.8"
  }
}

You can, of course, tweak package.json as needed.

Semiquaver