feat: add styles.configFile option

closes #263
closes #245
closes #221

Author: KaelWD

dev/src/App.vue

@@ -2,7 +2,7 @@
   <v-app>
     <v-container>
       <v-alert>Alert</v-alert>
-      <v-card v-ripple>
+      <v-card v-ripple class="bg-red">
         <div style="text-align: center">
           <v-img src="/vuetify.png" style="display: inline-flex"></v-img>
         </div>

dev/src/main.js

@@ -1,5 +1,5 @@
-// import 'vuetify/styles'
-import './main.scss'
+import 'vuetify/styles'
+// import './main.scss'
 import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
 

dev/src/main.scss

@@ -1,4 +1,4 @@
-@use 'vuetify/styles' with (
+@use 'vuetify' with (
   $color-pack: false,
   $utilities: false,
   $alert-padding: 24px,

dev/src/settings.scss

@@ -0,0 +1,5 @@
+@forward 'vuetify/settings' with (
+  $utilities: false,
+  //$color-pack: false,
+  $button-height: 56px,
+);

dev/src/setup.vue

@@ -2,6 +2,6 @@
   <v-card title="Setup component"></v-card>
 </template>
 
-<script setup lang="ts">
+<script setup>
 //
 </script>

dev/vite.config.js

@@ -8,7 +8,12 @@ export default defineConfig(({ command }) => ({
   root: path.resolve(__dirname, 'src'),
   plugins: [
     vue(),
-    vuetify({ styles: 'expose', autoImport: true }),
+    vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'settings.scss',
+      },
+    }),
     {
       name: 'configure-server',
       configureServer(server) {

dev/webpack.config.js

@@ -10,7 +10,7 @@ function sassLoaderOptions (indentedSyntax = false) {
   return {
     // implementation: require('sass'),
     // additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
-    api: 'modern',
+    // api: 'modern',
     sassOptions: {
       indentedSyntax,
       // importers: [{
@@ -86,12 +86,14 @@ module.exports = {
       'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
       '@': path.resolve(__dirname, 'src')
     },
-    extensions: ['*', '.js', '.mjs', '.cjs', '.vue', '.json']
+    extensions: ['*', '.js', '.mjs', '.cjs', '.vue', '.json', '.sass', '.scss']
   },
   plugins: [
     new VueLoaderPlugin(),
     new VuetifyPlugin({
-      styles: 'expose',
+      styles: {
+        configFile: './src/settings.scss',
+      },
       // progressiveImages: true
     }),
     // new BundleAnalyzerPlugin({

package.json

@@ -15,6 +15,7 @@
     "@types/find-cache-dir": "^3.2.1",
     "@types/loader-utils": "^2.0.3",
     "@types/node": "^16.11.12",
+    "@types/mkdirp": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
     "@vitejs/plugin-vue": "^3.0.1",

packages/shared/src/index.ts

@@ -2,7 +2,9 @@ import * as path from 'upath'
 
 export interface Options {
   autoImport?: importPluginOptions,
-  styles?: true | 'none' | 'expose' | 'sass',
+  styles?: true | 'none' | 'expose' | 'sass' | {
+    configFile: string,
+  },
   /** @internal Only for testing */
   stylesTimeout?: number
 }
@@ -18,3 +20,11 @@ export { cacheDir, writeStyles } from './styles/writeStyles'
 export function resolveVuetifyBase () {
   return path.dirname(require.resolve('vuetify/package.json', { paths: [process.cwd()] }))
 }
+
+export function isObject (value: any): value is object {
+  return value !== null && typeof value === 'object'
+}
+
+export function includes (arr: any[], val: any) {
+  return arr.includes(val)
+}

packages/vite-plugin/README.md

@@ -30,6 +30,31 @@ export default createVuetify()
 ### Customising variables
 ```js
 // vite.config.js
+plugins: [
+  vue(),
+  vuetify({ styles: { configFile: 'src/settings.scss' } }),
+]
+```
+```js
+// plugins/vuetify.js
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+
+export default createVuetify()
+```
+```scss
+// settings.scss
+@use 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false,
+);
+```
+
+`settings.scss` can be used in your own components to access vuetify's variables.
+
+### Customising variables (old method)
+```js
+// vite.config.js
 plugins: [
   vue(),
   vuetify({ styles: 'expose' }),