From 0b508926f720294c96e6a626cb19845161ded984 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 09:49:59 +0100
Subject: [PATCH 01/24] Add documentation for Vuetify SAAS variable overriding

SAAS variable overriding was difficult to figure out how to configure using this module.  Provide some sample documentation for how to get it to work.
---
 docs/guide/saas-variables.md | 61 ++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 docs/guide/saas-variables.md

diff --git a/docs/guide/saas-variables.md b/docs/guide/saas-variables.md
new file mode 100644
index 0000000..bf9e9da
--- /dev/null
+++ b/docs/guide/saas-variables.md
@@ -0,0 +1,61 @@
+# Overriding SAAS Variables
+
+Vuetify allows for [overriding global and component-level SAAS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
+documentation while using this Nuxt module.
+
+1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/main.scss` and `assets/styles/settings.scss`
+
+2)  In the `main.scss` file, we'll want to add
+```scss
+@use 'vuetify' with (
+    // Global Vuetify SAAS variable overrides.  For example:
+    // $utilities: false,
+    // $reset: false,
+    // $color-pack: false,
+    // $body-font-family: sans-serif
+)
+```
+
+3)  In the `settings.scss` file, we'll want to add
+```scss
+// $button-text-transform-override: capitalize;
+
+@forward 'vuetify/settings' with (
+    // Component Vuetify SAAS variable overrides.
+    // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
+    // $button-text-transform: $button-text-transform-override,
+);
+```
+
+4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
+```javascript
+export default defineNuxtConfig({
+/* ... */
+  css: ['assets/styles/main.scss']
+/* ... */
+})
+```
+
+_Note: This will import `main.scss` to into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
+
+5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
+```javascript
+export default defineNuxtConfig({
+/* ... */
+  css: ['assets/styles/main.scss'],
+  vuetify: {
+    moduleOptions: {
+      /* module specific options */
+      /* https://www.youtube.com/watch?v=aamWg1TuC3o */
+      disableVuetifyStyles: true,
+      styles: {
+        configFile: 'assets/styles/settings.scss'
+      },
+    },
+  }
+/* ... */
+})
+```
+
+You should now be able to override your [global Vuetify SAAS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SAAS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
+in your respective `settings.scss` and `main.scss` files.

From f1f938faf0c0464453b3601a09fbd4c82f363b9a Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 10:01:23 +0100
Subject: [PATCH 02/24] Fix a typo in sass-variables.md

---
 docs/guide/saas-variables.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/saas-variables.md b/docs/guide/saas-variables.md
index bf9e9da..8761bf8 100644
--- a/docs/guide/saas-variables.md
+++ b/docs/guide/saas-variables.md
@@ -36,7 +36,7 @@ export default defineNuxtConfig({
 })
 ```
 
-_Note: This will import `main.scss` to into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
+_Note: This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
 
 5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
 ```javascript

From b43f7801bad59ae88d9b12b0313ace4d6f805500 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:15:06 +0100
Subject: [PATCH 03/24] Fix SASS typos

For some reason my tired brain was thinking Software as a Service, rather than SASS.  Replace them all.
---
 docs/guide/saas-variables.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/guide/saas-variables.md b/docs/guide/saas-variables.md
index 8761bf8..f105151 100644
--- a/docs/guide/saas-variables.md
+++ b/docs/guide/saas-variables.md
@@ -1,6 +1,6 @@
-# Overriding SAAS Variables
+# Overriding SASS Variables
 
-Vuetify allows for [overriding global and component-level SAAS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
+Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
 documentation while using this Nuxt module.
 
 1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/main.scss` and `assets/styles/settings.scss`
@@ -8,7 +8,7 @@ documentation while using this Nuxt module.
 2)  In the `main.scss` file, we'll want to add
 ```scss
 @use 'vuetify' with (
-    // Global Vuetify SAAS variable overrides.  For example:
+    // Global Vuetify SASS variable overrides.  For example:
     // $utilities: false,
     // $reset: false,
     // $color-pack: false,
@@ -21,7 +21,7 @@ documentation while using this Nuxt module.
 // $button-text-transform-override: capitalize;
 
 @forward 'vuetify/settings' with (
-    // Component Vuetify SAAS variable overrides.
+    // Component Vuetify SASS variable overrides.
     // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
     // $button-text-transform: $button-text-transform-override,
 );
@@ -57,5 +57,5 @@ export default defineNuxtConfig({
 })
 ```
 
-You should now be able to override your [global Vuetify SAAS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SAAS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
+You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
 in your respective `settings.scss` and `main.scss` files.

From abad0c9f5ac829d43191c9a41882df06ea7662f1 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:16:24 +0100
Subject: [PATCH 04/24] Swap comments for 'other options'

Use 'other options' verbiage instead of comment with ellipsis for clarity
---
 docs/guide/saas-variables.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/guide/saas-variables.md b/docs/guide/saas-variables.md
index f105151..479cb38 100644
--- a/docs/guide/saas-variables.md
+++ b/docs/guide/saas-variables.md
@@ -30,9 +30,8 @@ documentation while using this Nuxt module.
 4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
 ```javascript
 export default defineNuxtConfig({
-/* ... */
   css: ['assets/styles/main.scss']
-/* ... */
+  // other options
 })
 ```
 
@@ -41,7 +40,7 @@ _Note: This will import `main.scss` into ALL of your components by default. If y
 5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
 ```javascript
 export default defineNuxtConfig({
-/* ... */
+  // other options
   css: ['assets/styles/main.scss'],
   vuetify: {
     moduleOptions: {
@@ -53,7 +52,7 @@ export default defineNuxtConfig({
       },
     },
   }
-/* ... */
+  // other options
 })
 ```
 

From 6a50149149ca122db6f9f7a86ebe1385632731b6 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:26:02 +0100
Subject: [PATCH 05/24] Move saas-variables.md to sass-modern-compiler.md

Per PR review, moving the contents of saas-variables.md (sic, sorry) to sass-modern-compiler.md as a sub-section.
---
 docs/guide/sass-modern-compiler.md | 61 +++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index a1191a7..3fd8c55 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -1,4 +1,4 @@
-# SASS Modern Compiler
+# SASS Modern Compiler and SASS Variables
 
 From version `0.17.0`, this module will configure Nuxt to use the new SASS modern compiler (`modern-compiler`). You don't need to change anything in your configuration to use it:
 - update `vite` version to `v5.4.0` or higher (if you're using Nuxt `3.12.4` or higher, you don't need to update `vite`)
@@ -7,3 +7,62 @@ From version `0.17.0`, this module will configure Nuxt to use the new SASS moder
 If the `sass-embedded` dependency is not installed, the module will configure the `modern` compiler for you. In case you get errors, enable the `disableModernSassCompiler` option in the module configuration to fall back to the `legacy` compiler.
 
 Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#build-performance) in Vuetify docs for more details.
+
+## Overriding SASS Variables
+
+Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
+documentation while using this Nuxt module.
+
+1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/main.scss` and `assets/styles/settings.scss`
+
+2)  In the `main.scss` file, we'll want to add
+```scss
+@use 'vuetify' with (
+    // Global Vuetify SASS variable overrides.  For example:
+    // $utilities: false,
+    // $reset: false,
+    // $color-pack: false,
+    // $body-font-family: sans-serif
+)
+```
+
+3)  In the `settings.scss` file, we'll want to add
+```scss
+// $button-text-transform-override: capitalize;
+
+@forward 'vuetify/settings' with (
+    // Component Vuetify SASS variable overrides.
+    // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
+    // $button-text-transform: $button-text-transform-override,
+);
+```
+
+4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
+```javascript
+export default defineNuxtConfig({
+  css: ['assets/styles/main.scss']
+  // other options
+})
+```
+
+_Note: This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
+
+5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
+```javascript
+export default defineNuxtConfig({
+  css: ['assets/styles/main.scss'],
+  vuetify: {
+    moduleOptions: {
+      /* module specific options */
+      /* https://www.youtube.com/watch?v=aamWg1TuC3o */
+      disableVuetifyStyles: true,
+      styles: {
+        configFile: 'assets/styles/settings.scss'
+      },
+    },
+  }
+  // other options
+})
+```
+
+You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)

From 37ff8ff92c385c3d5825a5fd1e243111f1fc1752 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:26:23 +0100
Subject: [PATCH 06/24] Delete docs/guide/saas-variables.md

---
 docs/guide/saas-variables.md | 60 ------------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 docs/guide/saas-variables.md

diff --git a/docs/guide/saas-variables.md b/docs/guide/saas-variables.md
deleted file mode 100644
index 479cb38..0000000
--- a/docs/guide/saas-variables.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Overriding SASS Variables
-
-Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
-documentation while using this Nuxt module.
-
-1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/main.scss` and `assets/styles/settings.scss`
-
-2)  In the `main.scss` file, we'll want to add
-```scss
-@use 'vuetify' with (
-    // Global Vuetify SASS variable overrides.  For example:
-    // $utilities: false,
-    // $reset: false,
-    // $color-pack: false,
-    // $body-font-family: sans-serif
-)
-```
-
-3)  In the `settings.scss` file, we'll want to add
-```scss
-// $button-text-transform-override: capitalize;
-
-@forward 'vuetify/settings' with (
-    // Component Vuetify SASS variable overrides.
-    // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
-    // $button-text-transform: $button-text-transform-override,
-);
-```
-
-4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
-```javascript
-export default defineNuxtConfig({
-  css: ['assets/styles/main.scss']
-  // other options
-})
-```
-
-_Note: This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
-
-5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
-```javascript
-export default defineNuxtConfig({
-  // other options
-  css: ['assets/styles/main.scss'],
-  vuetify: {
-    moduleOptions: {
-      /* module specific options */
-      /* https://www.youtube.com/watch?v=aamWg1TuC3o */
-      disableVuetifyStyles: true,
-      styles: {
-        configFile: 'assets/styles/settings.scss'
-      },
-    },
-  }
-  // other options
-})
-```
-
-You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
-in your respective `settings.scss` and `main.scss` files.

From 5c649b64e97fccb273300ffc70c01e1cadcc189b Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:34:37 +0100
Subject: [PATCH 07/24] Add reference to SASS Modern Compiler in Server Side
 Rendering

Reference SASS Modern Compiler sub-section in Server Side Rendering doc
---
 docs/guide/server-side-rendering.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index 4dd9fa6..5bda671 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -50,6 +50,8 @@ export default defineNuxtConfig({
 })
 ```
 
+For a more detailed example, see the [SASS Modern Compiler doc](https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/sass-modern-compiler.md#overriding-sass-variables).
+
 ## Vuetify Themes
 
 If you're using multiple Vuetify Themes with SSR enabled, Vuetify [useTheme](https://vuetifyjs.com/en/api/use-theme/) will not work since there is no way to know which theme to use in the server (the server will use the default theme).

From 9c3b47299c7685782c8ad9e363c0d8e5704925dd Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 16:59:32 +0100
Subject: [PATCH 08/24] Make SSR link to modern SASS vars relative

---
 docs/guide/server-side-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index 5bda671..e09febe 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
 })
 ```
 
-For a more detailed example, see the [SASS Modern Compiler doc](https://github.com/vuetifyjs/nuxt-module/blob/main/docs/guide/sass-modern-compiler.md#overriding-sass-variables).
+For a more detailed example, see the [Overriding SASS Variables section of the Modern Compiler doc](/guide/sass-modern-compiler.md#overriding-sass-variables).
 
 ## Vuetify Themes
 

From aa757e5b93f8a87e6faa25086fcadc4d8e5b6a95 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 17:03:34 +0100
Subject: [PATCH 09/24] Update SASS Modern Compiler doc title

---
 docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b6ac525..476c97c 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -191,7 +191,7 @@ export default withPwa(defineConfig({
         text: 'Date Support',
         link: '/guide/date',
       }, {
-        text: 'SASS Modern Compiler',
+        text: 'SASS Modern Compiler and SASS Variables',
         link: '/guide/sass-modern-compiler',
       }, {
         text: 'FAQ',

From 0cd48a30b3e5837f95e4df029498007ab5757a5d Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 17:06:50 +0100
Subject: [PATCH 10/24] Make server side rendering reference to overriding sass
 variables more clear

---
 docs/guide/server-side-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index e09febe..6a6bc64 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
 })
 ```
 
-For a more detailed example, see the [Overriding SASS Variables section of the Modern Compiler doc](/guide/sass-modern-compiler.md#overriding-sass-variables).
+For a more detailed example, see [Overriding SASS Variables](/guide/sass-modern-compiler.md#overriding-sass-variables).
 
 ## Vuetify Themes
 

From eb1e650ea6d3f2b8d8aa728aaebc553e3af9fab1 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Wed, 20 Nov 2024 17:08:44 +0100
Subject: [PATCH 11/24] Change main.scss note to a tip for clarity

---
 docs/guide/sass-modern-compiler.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index 3fd8c55..5a19f90 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -45,7 +45,8 @@ export default defineNuxtConfig({
 })
 ```
 
-_Note: This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead._
+> [!TIP]
+> This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead.
 
 5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
 ```javascript

From f7d458d050c9103f1efb03c3464fbf1647e984a1 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 09:35:14 +0100
Subject: [PATCH 12/24] Use backwards-compatible path syntax

---
 docs/guide/sass-modern-compiler.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index 5a19f90..f3156ef 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -40,7 +40,7 @@ documentation while using this Nuxt module.
 4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
 ```javascript
 export default defineNuxtConfig({
-  css: ['assets/styles/main.scss']
+  css: ['@/assets/styles/main.scss']
   // other options
 })
 ```
@@ -58,7 +58,7 @@ export default defineNuxtConfig({
       /* https://www.youtube.com/watch?v=aamWg1TuC3o */
       disableVuetifyStyles: true,
       styles: {
-        configFile: 'assets/styles/settings.scss'
+        configFile: '@/assets/styles/settings.scss'
       },
     },
   }

From 747ca5f9a37b63d74666efafb9f91d5d56fb0634 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 09:51:06 +0100
Subject: [PATCH 13/24] Use globals.scss for Vuetify override and clarify tip

---
 docs/guide/sass-modern-compiler.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index f3156ef..a781a06 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -13,9 +13,9 @@ Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#buil
 Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
 documentation while using this Nuxt module.
 
-1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/main.scss` and `assets/styles/settings.scss`
+1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/globals.scss` and `assets/styles/settings.scss`
 
-2)  In the `main.scss` file, we'll want to add
+2)  In the `globals.scss` file, we'll want to add
 ```scss
 @use 'vuetify' with (
     // Global Vuetify SASS variable overrides.  For example:
@@ -37,21 +37,21 @@ documentation while using this Nuxt module.
 );
 ```
 
-4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `main.scss` like so:
+4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `globals.scss` like so:
 ```javascript
 export default defineNuxtConfig({
-  css: ['@/assets/styles/main.scss']
+  css: ['@/assets/styles/globals.scss']
   // other options
 })
 ```
 
 > [!TIP]
-> This will import `main.scss` into ALL of your components by default. If you would like different behavior, you can create a different file with these overrides and import that instead.
+> The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) property within your `defineNuxtConfig` will import all styles from the file that you specify (in our case, `globals.scss`) into all components for convenience. Any styles appended to the `globals.scss` file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate `main.scss` that you import on a component-by-component basis.
 
 5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
 ```javascript
 export default defineNuxtConfig({
-  css: ['assets/styles/main.scss'],
+  css: ['assets/styles/globals.scss'],
   vuetify: {
     moduleOptions: {
       /* module specific options */

From 97d24cff22b10cb18b71ffeab3b037d0e2959612 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 09:57:06 +0100
Subject: [PATCH 14/24] Update styles paths to be more standards compliant

---
 docs/guide/sass-modern-compiler.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index a781a06..7c4c74c 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -13,7 +13,7 @@ Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#buil
 Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
 documentation while using this Nuxt module.
 
-1)  In your styles directory (for this example, we'll use `${workspace}/assets/styles`), create two files - `assets/styles/globals.scss` and `assets/styles/settings.scss`
+1)  In your styles directory (for this example, we'll use `${srcDir}/assets/css`), create two files - `${srcDir}/assets/css/globals.scss` and `${srcDir}/assets/css/settings.scss`
 
 2)  In the `globals.scss` file, we'll want to add
 ```scss
@@ -40,7 +40,7 @@ documentation while using this Nuxt module.
 4)  In your `nuxt.config.ts`, add a `css` entry to the `defineNuxtConfig` configuration object that points to `globals.scss` like so:
 ```javascript
 export default defineNuxtConfig({
-  css: ['@/assets/styles/globals.scss']
+  css: ['@/assets/css/globals.scss']
   // other options
 })
 ```
@@ -51,14 +51,14 @@ export default defineNuxtConfig({
 5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
 ```javascript
 export default defineNuxtConfig({
-  css: ['assets/styles/globals.scss'],
+  css: ['assets/css/globals.scss'],
   vuetify: {
     moduleOptions: {
       /* module specific options */
       /* https://www.youtube.com/watch?v=aamWg1TuC3o */
       disableVuetifyStyles: true,
       styles: {
-        configFile: '@/assets/styles/settings.scss'
+        configFile: '@/assets/css/settings.scss'
       },
     },
   }

From fbf6f53800d71c7f1fcf5b905e939b7118e3609e Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:02:22 +0100
Subject: [PATCH 15/24] Add example link to component-level sass overrides

---
 docs/guide/sass-modern-compiler.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index 7c4c74c..b6c546c 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -31,7 +31,8 @@ documentation while using this Nuxt module.
 // $button-text-transform-override: capitalize;
 
 @forward 'vuetify/settings' with (
-    // Component Vuetify SASS variable overrides.
+    // Component Vuetify SASS variable overrides.  See https://vuetifyjs.com/en/features/sass-variables/#variable-api
+
     // For example -- overriding button font capitalization (as seen at the bottom of the v-btn guide here https://vuetifyjs.com/en/api/v-btn/):
     // $button-text-transform: $button-text-transform-override,
 );

From d62fcb47293eaef242388b56b8b043ba1e0e5d5f Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:05:13 +0100
Subject: [PATCH 16/24] Reword step 5 for clarity

---
 docs/guide/sass-modern-compiler.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index b6c546c..ce665b4 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -49,7 +49,7 @@ export default defineNuxtConfig({
 > [!TIP]
 > The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) property within your `defineNuxtConfig` will import all styles from the file that you specify (in our case, `globals.scss`) into all components for convenience. Any styles appended to the `globals.scss` file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate `main.scss` that you import on a component-by-component basis.
 
-5)  Again in your `nuxt.config.ts`, we'll want to add another entry to the `defineNuxtConfig` configuration object that overrides the default Vuetify Styles imports and instead imports your settings:
+5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the settings.scss override file:
 ```javascript
 export default defineNuxtConfig({
   css: ['assets/css/globals.scss'],

From 080868b363a8d8349c134c69136ead6225eebd20 Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:08:10 +0100
Subject: [PATCH 17/24] Update file header to SASS customization

---
 docs/guide/sass-modern-compiler.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index ce665b4..c9f95b9 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -1,4 +1,4 @@
-# SASS Modern Compiler and SASS Variables
+# SASS Customization
 
 From version `0.17.0`, this module will configure Nuxt to use the new SASS modern compiler (`modern-compiler`). You don't need to change anything in your configuration to use it:
 - update `vite` version to `v5.4.0` or higher (if you're using Nuxt `3.12.4` or higher, you don't need to update `vite`)

From c6b426f033bfbe85d19288e7026c103df088d19c Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:09:38 +0100
Subject: [PATCH 18/24] Update left-panel option name for clarity

---
 docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 476c97c..6efc63f 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -191,7 +191,7 @@ export default withPwa(defineConfig({
         text: 'Date Support',
         link: '/guide/date',
       }, {
-        text: 'SASS Modern Compiler and SASS Variables',
+        text: 'SASS Customization',
         link: '/guide/sass-modern-compiler',
       }, {
         text: 'FAQ',

From 9516006566811ba458064106da5e2826f242262e Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:20:29 +0100
Subject: [PATCH 19/24] Update forgotten '@/' in nuxt config file

---
 docs/guide/sass-modern-compiler.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-modern-compiler.md
index c9f95b9..0f55dff 100644
--- a/docs/guide/sass-modern-compiler.md
+++ b/docs/guide/sass-modern-compiler.md
@@ -52,7 +52,7 @@ export default defineNuxtConfig({
 5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the settings.scss override file:
 ```javascript
 export default defineNuxtConfig({
-  css: ['assets/css/globals.scss'],
+  css: ['@/assets/css/globals.scss'],
   vuetify: {
     moduleOptions: {
       /* module specific options */

From fde8173f72af39acbac513b10b723bb4c5d9a53a Mon Sep 17 00:00:00 2001
From: Tim Growney <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:22:47 +0100
Subject: [PATCH 20/24] Rename sass-modern-compiler to sass-customization and
 update link path

---
 docs/.vitepress/config.ts                                     | 2 +-
 docs/guide/{sass-modern-compiler.md => sass-customization.md} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename docs/guide/{sass-modern-compiler.md => sass-customization.md} (100%)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6efc63f..678c2d0 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -192,7 +192,7 @@ export default withPwa(defineConfig({
         link: '/guide/date',
       }, {
         text: 'SASS Customization',
-        link: '/guide/sass-modern-compiler',
+        link: '/guide/sass-customization',
       }, {
         text: 'FAQ',
         link: '/guide/faq',
diff --git a/docs/guide/sass-modern-compiler.md b/docs/guide/sass-customization.md
similarity index 100%
rename from docs/guide/sass-modern-compiler.md
rename to docs/guide/sass-customization.md

From da8dbeefe1ee4ccb42a9f3ebc6d13659e302eba7 Mon Sep 17 00:00:00 2001
From: Tim Growney <moscro@gmail.com>
Date: Fri, 22 Nov 2024 10:27:01 +0100
Subject: [PATCH 21/24] Update broken link reference

---
 docs/guide/server-side-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index 6a6bc64..072aa2b 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -50,7 +50,7 @@ export default defineNuxtConfig({
 })
 ```
 
-For a more detailed example, see [Overriding SASS Variables](/guide/sass-modern-compiler.md#overriding-sass-variables).
+For a more detailed example, see [Overriding SASS Variables](/guide/sass-customization.md#overriding-sass-variables).
 
 ## Vuetify Themes
 

From 807c9d0cbe76563dd4809fc865032bf2c0a4d7bd Mon Sep 17 00:00:00 2001
From: Tim <moscro@gmail.com>
Date: Fri, 22 Nov 2024 11:36:59 +0100
Subject: [PATCH 22/24] Add link to global sass variable index

---
 docs/guide/sass-customization.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/sass-customization.md b/docs/guide/sass-customization.md
index 0f55dff..1407e90 100644
--- a/docs/guide/sass-customization.md
+++ b/docs/guide/sass-customization.md
@@ -67,4 +67,4 @@ export default defineNuxtConfig({
 })
 ```
 
-You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api)
+You should now be able to override your [global Vuetify SASS variables](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss) as well as your [component-level Vuetify SASS variables](https://vuetifyjs.com/en/features/sass-variables/#variable-api).  For a full list of variables, check out [all of the imports in the index](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_index.sass).

From 0dd2cc564160f3ad88ba5d35944d5379e9c44667 Mon Sep 17 00:00:00 2001
From: Tim Growney <moscro@gmail.com>
Date: Fri, 22 Nov 2024 11:38:50 +0100
Subject: [PATCH 23/24] Make settings.scss code styled

---
 docs/guide/sass-customization.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/sass-customization.md b/docs/guide/sass-customization.md
index 1407e90..30fdfc0 100644
--- a/docs/guide/sass-customization.md
+++ b/docs/guide/sass-customization.md
@@ -49,7 +49,7 @@ export default defineNuxtConfig({
 > [!TIP]
 > The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) property within your `defineNuxtConfig` will import all styles from the file that you specify (in our case, `globals.scss`) into all components for convenience. Any styles appended to the `globals.scss` file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate `main.scss` that you import on a component-by-component basis.
 
-5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the settings.scss override file:
+5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the `settings.scss` override file:
 ```javascript
 export default defineNuxtConfig({
   css: ['@/assets/css/globals.scss'],

From 066ff53edc3df9bb7f1e93733e7b482061348dc2 Mon Sep 17 00:00:00 2001
From: Tim Growney <moscro@gmail.com>
Date: Fri, 22 Nov 2024 11:44:20 +0100
Subject: [PATCH 24/24] Change settings.scss to components.scss

---
 docs/guide/sass-customization.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/guide/sass-customization.md b/docs/guide/sass-customization.md
index 30fdfc0..acf19a8 100644
--- a/docs/guide/sass-customization.md
+++ b/docs/guide/sass-customization.md
@@ -13,7 +13,7 @@ Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#buil
 Vuetify allows for [overriding global and component-level SASS variables](https://vuetifyjs.com/en/features/sass-variables/).  Setting these up requires configuration that is slightly different from the Vuetify
 documentation while using this Nuxt module.
 
-1)  In your styles directory (for this example, we'll use `${srcDir}/assets/css`), create two files - `${srcDir}/assets/css/globals.scss` and `${srcDir}/assets/css/settings.scss`
+1)  In your styles directory (for this example, we'll use `${srcDir}/assets/css`), create two files - `${srcDir}/assets/css/globals.scss` and `${srcDir}/assets/css/components.scss`
 
 2)  In the `globals.scss` file, we'll want to add
 ```scss
@@ -26,7 +26,7 @@ documentation while using this Nuxt module.
 )
 ```
 
-3)  In the `settings.scss` file, we'll want to add
+3)  In the `components.scss` file, we'll want to add
 ```scss
 // $button-text-transform-override: capitalize;
 
@@ -49,7 +49,7 @@ export default defineNuxtConfig({
 > [!TIP]
 > The [css](https://nuxt.com/docs/getting-started/styling#the-css-property) property within your `defineNuxtConfig` will import all styles from the file that you specify (in our case, `globals.scss`) into all components for convenience. Any styles appended to the `globals.scss` file in addition to the Vuetify Global Variables override will also be imported into all of your components. If you would like more fine-grained control, consider using a different file for your non-Vuetify global styles, like a separate `main.scss` that you import on a component-by-component basis.
 
-5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the `settings.scss` override file:
+5)  Again in your `nuxt.config.ts`, under the Vuetify module options, disable the Vuetify Styles import for components and instead import the `components.scss` override file:
 ```javascript
 export default defineNuxtConfig({
   css: ['@/assets/css/globals.scss'],
@@ -59,7 +59,7 @@ export default defineNuxtConfig({
       /* https://www.youtube.com/watch?v=aamWg1TuC3o */
       disableVuetifyStyles: true,
       styles: {
-        configFile: '@/assets/css/settings.scss'
+        configFile: '@/assets/css/components.scss'
       },
     },
   }