Docker - how to run compass watch

Docker - how to run compass watch

Compass watch compiles sass or scss files using compass open-source CSS Authoring Framework. The way mentioned in this blog is config compass in docker-compose so that every time any sass changed, compass watch will run automatically. 

First, you need to configure your folders in a config.rb file, placed on the sass root folder. Here's an example folder structure, and its corresponding config.rb file.


So the config.rb should set like below:

# Require any additional compass plugins here.

#Folder settings
css_dir = "../public/css"          #where the CSS will saved
sass_dir = "sass"           #where our .scss files are
images_dir = "../public/img"    #the folder with your images

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded # After dev :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true

# Obviously
preferred_syntax = :scss

You need to add the followings to your docker-compose file. We use antonienko/compass-watch image here.

  build: antonienko/compass-watch
  command: watch --poll /src/compass
    - /src:/src

If all your code base in ./docroot folder and the drupal theme directory is "./docroot/sites/all/themes/bootstrap_subtheme". config.rb locates in "/var/www/html/sites/all/themes/bootstrap_subtheme/sass". You can set up docker-compose like below:

  image: antonienko/compass-watch
  command: watch --poll /var/www/html/sites/all/themes/bootstrap_subtheme/sass
    - ./docroot/sites/all/themes/bootstrap_subtheme:/var/www/html/sites/all/themes/bootstrap_subtheme/



blog tag: