Skip to content

Replace deprecated SCSS gem

Sarah German requested to merge modernize-scss into main

What does this MR do and why?

Removes SCSS (Sass) processing and CSS compilation from Nanoc. The Ruby Sass gem is no longer maintained, and the underlying libsass library is deprecated.

This MR adds Dart Sass. Both the GitLab UI and main GitLab projects use this package as well.

Compile time isn't very different from before (make compile, which still compiles both Nanoc and Sass, just in separate steps now, runs about 2 seconds faster), but being able to compile CSS outside of Nanoc will make frontend development significantly quicker.

Closes #1300 (closed)

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md.
  2. Update dependencies: make setup
  3. Compile and view the site: make view
  4. Verify there are no build errors or visual changes on the site.
  5. Run a CSS compile locally: yarn compile:css (Output should just look something like this: ✨ Done in 1.37s.)
  6. Run yarn watch:css and edit a SCSS file, then verify your change is reflected on the site after a page refresh. Adding a display: none; to the first body selector in content/assets/stylesheets/stylesheet.scss is a nice obvious one to try out 😸

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sarah German

Merge request reports