Skip to content

Commit

Permalink
Load govuk-frontend Sass with NodePackageImporter
Browse files Browse the repository at this point in the history
There's [a bug in the way Vite's inbuilt sass importing works](vitejs/vite#19196)
that means some of our assets don't build properly if we import the
govuk-frontend styles using the @GOVUK alias.

We can get around this by using Sass's builtin NodePackageImporter to
import the govuk-frontend styles. This bypasses the Vite import code
that causes the issue.

It's also better for a couple of other reasons. It makes it clear that
this import is coming from an npm package (which was obscured slightly
when we were using the alias). It also makes us resilient to structure
changes in the govuk-frontend package (NodePackageImporter uses the
'sass' field in govuk-frontend's package.json to determine the file to
import, so we no longer need to point to a specific file which could
change).
  • Loading branch information
DavidBiddle committed Jan 15, 2025
1 parent 64e0541 commit c7150e0
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 2 deletions.
2 changes: 1 addition & 1 deletion app/frontend/entrypoints/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ $govuk-images-path: "@govuk/assets/images/";
$govuk-fonts-path: "@govuk/assets/fonts/";
$govuk-global-styles: true;

@import "@govuk/all";
@import "pkg:govuk-frontend";
@import "dfe-autocomplete/src/dfe-autocomplete";
@import "../styles/app_form_states";
@import "../styles/app_memorandum_of_understanding";
Expand Down
3 changes: 2 additions & 1 deletion vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import * as path from 'node:path'
import { NodePackageImporter } from 'sass'

export default defineConfig({
plugins: [RubyPlugin()],
Expand All @@ -11,7 +12,7 @@ export default defineConfig({
preprocessorOptions: {
scss: {
api: 'modern',
loadPaths: ['./node_modules/govuk-frontend/'],
importers: [new NodePackageImporter()],
quietDeps: true
},
devSourcemaps: true
Expand Down

0 comments on commit c7150e0

Please sign in to comment.