如何在 sidecar 容器中使用 node-sass scss 在 ddev 项目中自动构建 CSS？

Question

我有一个 Drupal 项目，我想使用 Node.js 构建脚本将 SCSS 编译成 CSS。

Answer 1

我使用了一个单独的 sidecar 容器，它不断监视我的 Drupal 主题中 SCSS 的变化并构建 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 命令获取输出。