Fix Sass legacy JS API deprecation in webpack build

Warning fixed:
- "The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0." repeated during yarn build.

Approach:
- Upgrade sass-loader from v10 to v13 (Node 16 compatible) and configure sass-loader with api: "modern".
- Add Sass load paths for node_modules so package imports resolve under the modern API.
- Update design-system-react @forward path to its explicit distributed SCSS entrypoint for reliable modern resolution.

Why this approach:
- Removes dependence on the deprecated Sass legacy API instead of suppressing the warning.
- Keeps compatibility with current CI Node runtime while modernizing Sass integration.

Alternatives considered:
- Stay on sass-loader v10 and suppress the legacy API warning: rejected because this leaves deprecated behavior in place.
- Jump to sass-loader v14+: rejected because those versions require newer Node than current CI.

Co-authored-by: Chris Zetter <zetter-rpf@users.noreply.github.com>

Author: cursoragent

package.json

@@ -176,7 +176,7 @@
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
     "sass": "^1.51.0",
-    "sass-loader": "^10.0.0",
+    "sass-loader": "^13.3.3",
     "semver": "7.3.2",
     "style-it": "^2.1.4",
     "style-loader": "1.3.0",

src/assets/stylesheets/ExternalStyles.scss

@@ -1,4 +1,4 @@
-@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
+@forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/scss/design-system-core.scss";
 @use "../../../node_modules/react-tabs/style/react-tabs.css";
 @use "../../../node_modules/react-toggle/style.css";
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";

webpack.config.js

@@ -50,6 +50,10 @@ module.exports = {
           {
             loader: "sass-loader",
             options: {
+              api: "modern",
+              sassOptions: {
+                loadPaths: [path.resolve(__dirname, "node_modules")],
+              },
               sourceMap: true,
             },
           },

yarn.lock

@@ -3994,7 +3994,7 @@ __metadata:
     resolve: "npm:1.18.1"
     resolve-url-loader: "npm:^3.1.2"
     sass: "npm:^1.51.0"
-    sass-loader: "npm:^10.0.0"
+    sass-loader: "npm:^13.3.3"
     semver: "npm:7.3.2"
     skulpt: "npm:^1.2.0"
     stream-browserify: "npm:^3.0.0"
@@ -21851,28 +21851,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^10.0.0":
-  version: 10.5.2
-  resolution: "sass-loader@npm:10.5.2"
+"sass-loader@npm:^13.3.3":
+  version: 13.3.3
+  resolution: "sass-loader@npm:13.3.3"
   dependencies:
-    klona: "npm:^2.0.4"
-    loader-utils: "npm:^2.0.0"
     neo-async: "npm:^2.6.2"
-    schema-utils: "npm:^3.0.0"
-    semver: "npm:^7.3.2"
   peerDependencies:
     fibers: ">= 3.1.0"
     node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
     sass: ^1.3.0
-    webpack: ^4.36.0 || ^5.0.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
   peerDependenciesMeta:
     fibers:
       optional: true
     node-sass:
       optional: true
     sass:
       optional: true
-  checksum: 10/27b85f852d270a5c84b95f8ba3fbc84e7cbb77a3481f3ff2b74d4ea87f2ad4cefcba70ba41412b80e62ba433c75994d4d12d323d39a24de5087b60b571a1a3c9
+    sass-embedded:
+      optional: true
+  checksum: 10/a8a8519add9f0bb2d3d1b834dbf30b1b67e22833425755a56640cc20845107850adfc6f243cdab07a5cb26ec964513b950a02dca7b1d5b3cf3659c89bf1988eb
   languageName: node
   linkType: hard