Migrate to Sass modules

colinrotherham · colinrotherham · commit ddd839d25851 · 2025-09-02T14:43:01.000+01:00
diff --git a/manage_breast_screening/assets/sass/components/_button.scss b/manage_breast_screening/assets/sass/components/_button.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-button--link {
   @include nhsuk-link-style-default;
 
diff --git a/manage_breast_screening/assets/sass/components/_count.scss b/manage_breast_screening/assets/sass/components/_count.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-count {
   @include nhsuk-font-size(16);
 
diff --git a/manage_breast_screening/assets/sass/components/_secondary-navigation.scss b/manage_breast_screening/assets/sass/components/_secondary-navigation.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 /* FIXME: taken from prototype */
 $govuk-spacing1: 5px;
 $govuk-spacing2: 10px;
diff --git a/manage_breast_screening/assets/sass/components/_special-appointment-banner.scss b/manage_breast_screening/assets/sass/components/_special-appointment-banner.scss
@@ -1,3 +1,5 @@
+@use "../vendor/nhsuk-frontend/base" as *;
+
 .app-special-appointment-banner__action {
   text-align: right;
   @include nhsuk-font-size(19);
diff --git a/manage_breast_screening/assets/sass/main.scss b/manage_breast_screening/assets/sass/main.scss
@@ -1,12 +1,13 @@
-// Import NHS.UK frontend library
-@import "nhsuk-frontend/dist/nhsuk";
+// NHS.UK frontend library
+@use "vendor/nhsuk-frontend/base" as *;
+@forward "vendor/nhsuk-frontend";
 
 // Components that are not in the NHS.UK frontend library
-@import "components/button";
-@import "components/count";
-@import "components/appointment-status";
-@import "components/secondary-navigation";
-@import "components/special-appointment-banner";
+@forward "components/button";
+@forward "components/count";
+@forward "components/appointment-status";
+@forward "components/secondary-navigation";
+@forward "components/special-appointment-banner";
 
 h1 {
   @extend %nhsuk-heading-l;
diff --git a/manage_breast_screening/assets/sass/vendor/nhsuk-frontend/_base.scss b/manage_breast_screening/assets/sass/vendor/nhsuk-frontend/_base.scss
@@ -0,0 +1,3 @@
+@forward "nhsuk-frontend/dist/nhsuk/core/settings";
+@forward "nhsuk-frontend/dist/nhsuk/core/tools";
+@forward "nhsuk-frontend/dist/nhsuk/core/helpers";
diff --git a/manage_breast_screening/assets/sass/vendor/nhsuk-frontend/_index.scss b/manage_breast_screening/assets/sass/vendor/nhsuk-frontend/_index.scss
@@ -0,0 +1,2 @@
+@use "base";
+@forward "nhsuk-frontend/dist/nhsuk";
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   ],
   "scripts": {
     "compile": "concurrently npm:compile:js npm:compile:css --group --prefix none",
-    "compile:css": "sass --color --quiet-deps --silence-deprecation=import --load-path=. --load-path=node_modules manage_breast_screening/assets/sass:manage_breast_screening/assets/compiled/css",
+    "compile:css": "sass --color --quiet-deps --load-path=node_modules manage_breast_screening/assets/sass:manage_breast_screening/assets/compiled/css",
     "compile:css:watch": "npm run compile:css -- --watch",
     "compile:js": "rollup -c rollup.config.js --sourcemap",
     "compile:js:watch": "npm run compile:js -- --watch",

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend/base" as *;`
	`2`	`+`
`1`	`3`	`.app-button--link {`
`2`	`4`	`@include nhsuk-link-style-default;`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend/base" as *;`
	`2`	`+`
`1`	`3`	`.app-count {`
`2`	`4`	`@include nhsuk-font-size(16);`
`3`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend/base" as *;`
	`2`	`+`
`1`	`3`	`/* FIXME: taken from prototype */`
`2`	`4`	`$govuk-spacing1: 5px;`
`3`	`5`	`$govuk-spacing2: 10px;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "../vendor/nhsuk-frontend/base" as *;`
	`2`	`+`
`1`	`3`	`.app-special-appointment-banner__action {`
`2`	`4`	`text-align: right;`
`3`	`5`	`@include nhsuk-font-size(19);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@forward "nhsuk-frontend/dist/nhsuk/core/settings";`
	`2`	`+@forward "nhsuk-frontend/dist/nhsuk/core/tools";`
	`3`	`+@forward "nhsuk-frontend/dist/nhsuk/core/helpers";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@use "base";`
	`2`	`+@forward "nhsuk-frontend/dist/nhsuk";`