Skip to content

Setup Webpack to compile CSS

Muhammed Ali requested to merge gitlab-community/gitlab:webpack-sass into master

What does this MR do and why?

This MR configures Webpack to compile Sass to CSS. It is a WIP but does work. See: #438278 (closed)

It uses sass-loader and mini-css-extract-plugin to take Sass entry files and output them in the expected tree like structure to app/assets/builds

How it works

Sprockets when using the new cssbundling-rails expects files to exist in the app/assets/builds directory. Webpack will use compile_css.mjs helper functions to track entry files and output them to their targets.

What doesn't work

webpack-dev-server does not work. Webpack Dev Server, in my limited understanding, intercepts requests and compiles them on the fly. However I don't believe stylesheet_link_tag/Sprockets is configured to be intercepted. Webpacker introduced a Rack middleware that redirected any /assets requests to Webpack server, instead of being sent to rails and the Sprockets engine

According to cssbundling-rails, my assumption is this works as a file-based watcher, and Sprockets will post-process the CSS outputted in app/assets/builds before serving them in the dev environment.

You develop using this approach by running the bundler in watch mode in a terminal with yarn build:css --watch

  • I've left a bunch of TODO comments about some behaviour that still needs to be tested. some node_module imports may not work, some relative path imports don't work (specifically themes/_dark.scss produces nothing)

What Works

  • Webpack in static mode works

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After

How to set up and validate locally

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

configure GDK with

vite:
  enabled: false
webpack:
  enabled: true
  static: true
css:
  enabled: true

/cc @leipert

Edited by Muhammed Ali

Merge request reports