feat(styles): add sass option

Author: KaelWD

dev/package.json

@@ -20,8 +20,9 @@
     "css-loader": "^6.5.1",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^12.6.0",
     "url-loader": "^4.1.1",
+    "vite-plugin-inspect": "^0.4.3",
     "vue-style-loader": "^4.1.3",
     "vuetify-loader": "^2.0.0-alpha.1",
     "webpack-cli": "^4.9.1",

dev/src/_variables.scss

@@ -0,0 +1,3 @@
+$color-pack: false;
+$alert-padding: 24px;
+$utilities: false;

dev/vite.config.js

@@ -1,6 +1,7 @@
 import vue from '@vitejs/plugin-vue'
 import vuetify from '@vuetify/vite-plugin'
 import path from 'path'
+import Inspect from 'vite-plugin-inspect'
 
 export default {
   root: path.resolve(__dirname, 'src'),
@@ -17,13 +18,26 @@ export default {
           })
         }
       }
-    }
+    },
+    // Inspect(),
   ],
   build: {
     outDir: '../dist',
     emptyOutDir: true,
     rollupOptions: {
       input: 'index.vite.html'
     }
+  },
+  resolve: {
+    alias: {
+      '@': __dirname
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        // additionalData: `@forward '@/src/_variables'\n`,
+      }
+    }
   }
 }

dev/webpack.config.js

@@ -10,7 +10,19 @@ function sassLoaderOptions (indentedSyntax = false) {
   return {
     // implementation: require('sass'),
     // additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
-    sassOptions: { indentedSyntax },
+    api: 'modern',
+    sassOptions: {
+      indentedSyntax,
+      // importers: [{
+      //   canonicalize (url) {
+      //     console.log(url)
+      //     return new URL(url)
+      //   },
+      //   load (url) {
+      //     console.log(url)
+      //   }
+      // }]
+    },
   }
 }
 

package.json

@@ -18,12 +18,12 @@
     "@vue/compiler-sfc": "^3.2.24",
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "lerna": "^3.22.1",
-    "sass": "^1.44.0",
+    "sass": "^1.49.9",
     "typescript": "^4.4.2",
     "vite": "^2.7.1",
     "vue": "^3.2.19",
     "vue-loader": "^16.5.0",
-    "vuetify": "^3.0.0-alpha.11",
+    "vuetify": "npm:@vuetify/nightly@next",
     "webpack": "^5.65.0"
   }
 }

packages/shared/src/index.ts

@@ -1,6 +1,6 @@
 export interface Options {
   autoImport?: importPluginOptions,
-  styles?: true | 'none' | 'expose',
+  styles?: true | 'none' | 'expose' | 'sass',
   /** @internal Only for testing */
   stylesTimeout?: number
 }

packages/vite-plugin/README.md

@@ -64,3 +64,14 @@ import { createVuetify } from 'vuetify'
 
 export default createVuetify()
 ```
+
+### Import sass from source
+Vuetify 3 uses precompiled css by default, these imports can optionally be modified to point to sass files instead:
+
+```js
+// vite.config.js
+plugins: [
+  vue(),
+  vuetify({ styles: 'sass' }),
+]
+```

packages/vite-plugin/src/index.ts

@@ -16,7 +16,7 @@ export = function vuetify (_options: Options = {}) {
   if (options.autoImport) {
     plugins.push(importPlugin())
   }
-  if (options.styles === 'none' || options.styles === 'expose') {
+  if (options.styles === 'none' || options.styles === 'expose' || options.styles === 'sass') {
     plugins.push(stylesPlugin(options))
   }
 

packages/vite-plugin/src/stylesPlugin.ts

@@ -132,6 +132,8 @@ export function stylesPlugin (options: Options): PluginOption {
       ) {
         if (options.styles === 'none') {
           return '\0__void__'
+        } else if (options.styles === 'sass') {
+          return source.replace(/\.css$/, '.sass')
         } else if (options.styles === 'expose') {
           awaitResolve()
 

packages/vuetify-loader/README.md

@@ -111,5 +111,19 @@ import { createVuetify } from 'vuetify'
 export default createVuetify()
 ```
 
+### Import sass from source
+Vuetify 3 uses precompiled css by default, these imports can optionally be modified to point to sass files instead:
+
+```js
+// webpack.config.js
+const { VuetifyLoaderPlugin } = require('vuetify-loader')
+
+module.exports = {
+  plugins: [
+    new VuetifyLoaderPlugin({ styles: 'sass' }),
+  ],
+}
+```
+
 ## Progressive images
 Coming soon...