Как автоматически создать CSS внутри проекта ddev с помощью node-sass scss в контейнере sidecar?

У меня есть проект Drupal, в котором я хотел бы использовать сценарии сборки Node.js для компиляции SCSS в CSS.


person Dave Long    schedule 02.07.2020    source источник


Ответы (1)


Я использую отдельный контейнер sidecar, который постоянно следит за изменениями в SCSS в моей теме Drupal и создает CSS.

У меня есть .ddev/docker-compose.sass-watch.yaml файл со следующим:

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"]

Затем в моем каталоге тем у меня есть package.json следующим образом:

{
  "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"
  }
}

Команда watch постоянно работает в фоновом режиме, пока работает мой проект ddev.

Я также могу использовать ddev logs -s sass-watch для получения вывода от команды watch, если сборка не выглядит так, как будто она по какой-то причине работает.

person Dave Long    schedule 02.07.2020