diff --git a/packages/11ty/_includes/components/lightbox/styles.js b/packages/11ty/_includes/components/lightbox/styles.js
index 2f88a10f1..8fdeee919 100644
--- a/packages/11ty/_includes/components/lightbox/styles.js
+++ b/packages/11ty/_includes/components/lightbox/styles.js
@@ -20,7 +20,18 @@ module.exports = function (eleventyConfig) {
   if (!fs.existsSync(lightboxStylesPath)) {
     logger.warn(`q-lightbox component styles were not found at ${lightboxStylesPath}, this may cause the lightbox to behave unexpectedly.`)
   } else {
-    lightboxCSS = sass.compile(lightboxStylesPath)
+    const sassOptions = {
+      api: 'modern-compiler',
+      loadPaths: [path.resolve('node_modules')],
+      silenceDeprecations: [
+        'color-functions',
+        'global-builtin',
+        'import',
+        'legacy-js-api',
+        'mixed-decls'
+      ]
+    }
+    lightboxCSS = sass.compile(lightboxStylesPath, sassOptions)
   }
 
   return function () {
diff --git a/packages/11ty/_plugins/transforms/outputs/epub/index.js b/packages/11ty/_plugins/transforms/outputs/epub/index.js
index 8a93169f1..39f356f1d 100644
--- a/packages/11ty/_plugins/transforms/outputs/epub/index.js
+++ b/packages/11ty/_plugins/transforms/outputs/epub/index.js
@@ -43,8 +43,14 @@ module.exports = (eleventyConfig, collections) => {
      * Copy styles
      */
     const sassOptions = {
-      loadPaths: [
-        path.resolve('node_modules')
+      api: 'modern-compiler',
+      loadPaths: [path.resolve('node_modules')],
+      silenceDeprecations: [
+        'color-functions',
+        'global-builtin',
+        'import',
+        'legacy-js-api',
+        'mixed-decls'
       ]
     }
     const styles = sass.compile(path.resolve('content', assetsDir, 'styles', 'epub.scss'), sassOptions)
diff --git a/packages/11ty/_plugins/transforms/outputs/pdf/write.js b/packages/11ty/_plugins/transforms/outputs/pdf/write.js
index c97572aca..aaaf778d6 100644
--- a/packages/11ty/_plugins/transforms/outputs/pdf/write.js
+++ b/packages/11ty/_plugins/transforms/outputs/pdf/write.js
@@ -57,8 +57,14 @@ module.exports = (eleventyConfig) => {
     }
 
     const sassOptions = {
-      loadPaths: [
-        path.resolve('node_modules')
+      api: 'modern-compiler',
+      loadPaths: [path.resolve('node_modules')],
+      silenceDeprecations: [
+        'color-functions',
+        'global-builtin',
+        'import',
+        'legacy-js-api',
+        'mixed-decls'
       ]
     }
 
diff --git a/packages/11ty/_plugins/vite/index.js b/packages/11ty/_plugins/vite/index.js
index e3c97c8a6..cc0a13e7b 100644
--- a/packages/11ty/_plugins/vite/index.js
+++ b/packages/11ty/_plugins/vite/index.js
@@ -75,6 +75,25 @@ module.exports = function (eleventyConfig, { directoryConfig, publication }) {
         },
         sourcemap: true
       },
+      /**
+       * Configure style pre-procssing
+       * @see https://vite.dev/config/shared-options#css-preprocessoroptions
+       * @see https://sass-lang.com/documentation/js-api/interfaces/options/
+       */
+      css: {
+        preprocessorOptions: {
+          scss: {
+            api: 'modern-compiler',
+            silenceDeprecations: [
+              'color-functions',
+              'global-builtin',
+              'import',
+              'legacy-js-api',
+              'mixed-decls'
+            ]
+          }
+        }
+      },
       /**
        * Set to false to prevent Vite from clearing the terminal screen
        * and have Vite logging messages rendered alongside Eleventy output.