Move component styles to main stylesheet
What does this MR do and why?
After replacing rollup-plugin-vue (which is now deprecated) with @vitejs/plugin-vue2 in this MR, CSS in <style> blocks in Vue templates is no longer included in the resulting bundle. The Vite plugin instead creates a separate file for it.
It's possible to change this behavior in plugin configuration if you're using Vite (rather than Rollup) as the build tool, but it doesn't seem like that option is exposed when using the plugin directly with Rollup (https://github.com/vitejs/vite-plugin-vue2/issues/65).
We only used that kind of CSS-in-Vue in one file, and with only two CSS declarations. Rather than include additional tiny CSS files in the templates, let's just move those styles into stylesheet.scss.
Screenshots, screen recordings, or links to review app
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
Steps for verifying in the review app:
-
Visit the search result page: https://gps-vue-styles.docs.gitlab-review.app/search/?q=HEALTHCHECK_TCP_PORT -
Verify styles are working by checking if snippet text in the results is slightly smaller than our regular font size, and a scrollbar is present even for a short result list (to avoid the page jumping around on a subsequent search that might have a scrollbar)
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.
-
I have evaluated the MR acceptance checklist for this merge request.