Skip to content

Resolve #3466991 "Use gulp to compile sass with node instead of compass and rubygems"

Bill Sprowl requested to merge issue/bluecheese-3466991:3466991-Use-Gulp-to-compile-Sass-with-Node-instead-of-Compass-and-Rubygems into palantir

Closes #3466991

To test:

Install node and Yarn if you need to.

It was tested with versions on our ddev: node v18.20.3 and Yarn 4.1.1 so these are recommended.

  1. From the Bluecheese root directory, run yarn compile and verify that css/styles.css compiles as expected. There will be deprecation warnings.
  2. Run yarn watch and verify that css/styles updates as expected when you edit scss files in the sass directory.
  3. Ideally review an instance of the site with content and make sure it is not visually different.
  4. make an edit to sass/partials/_variables.scss and add some CSS Variables (this was erroring with Compass where it did not like the -- syntax)
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
  1. Verify that you can run yarn compile without getting errors.

Notes:

Compass reset is replaced with static code for Eric Meyer's CSS reset.

Compass mixins are being replaced with compass-mixins

Compass Vertical Rhythm is replaced by libsass-compass-vertical-rhythm

The Breakpoint gem is replaced by breakpoint-sass

gulp-sass-glob is used for "globbing" so that all scss files within specified directories will get compiled.

Edited by Bill Sprowl

Merge request reports