Docker - how to run compass watch

×

Error message

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in _menu_load_objects() (line 569 of /homepages/46/d762693627/htdocs/dc/includes/menu.inc).
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.

/src
  /compass
    /sass
    config.rb
  /app
  /public
    /css

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.

compass:
  build: antonienko/compass-watch
  command: watch --poll /src/compass
  volumes:
    - /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:

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

 

 

blog tag: