diff --git a/assets/css/app.scss b/assets/css/app.scss
index d98de57097..125896cc41 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -11,8 +11,8 @@
   --tw-content: '' !important;
 }
 
-@import "../node_modules/@mbta/rider-design-system/dist/variables.light.css" (prefers-color-scheme: light);
-@import "../node_modules/@mbta/rider-design-system/dist/variables.dark.css" (prefers-color-scheme: dark);
+@import "node_modules/@mbta/rider-design-system/dist/variables.light.css" (prefers-color-scheme: light);
+@import "node_modules/@mbta/rider-design-system/dist/variables.dark.css" (prefers-color-scheme: dark);
 @import '../../deps/mbta_metro/priv/static/assets/default.css';
 
 ////////////////////////////////////////////////////////////////////////////////////////
diff --git a/assets/webpack.config.base.js b/assets/webpack.config.base.js
index 986f49b176..cba79eaa14 100644
--- a/assets/webpack.config.base.js
+++ b/assets/webpack.config.base.js
@@ -138,6 +138,7 @@ module.exports = {
             options: {
               sassOptions: {
                 includePaths: [
+                  "node_modules/@mbta/rider-design-system/dist",
                   "node_modules/bootstrap/scss",
                   "node_modules/@fortawesome/fontawesome-free/scss"
                 ],