fix(docs): vuetify documentation was wrong and incomplete

apps/docs/stories/usage/dsfr-scss.mdx

@@ -4,7 +4,7 @@ import { Source } from '@storybook/blocks';
 import ViteTab from '@dsfrc/docs/stories/usage/dsfr-scss-vite.mdx';
 import WebpackTab from '@dsfrc/docs/stories/usage/dsfr-scss-webpack.mdx';
 
-Mais comme notre fichier `.scss` importe des variables directement depuis le DSFR, vous devez installer leur librairie :
+Mais comme le fichier `.scss` du thème importe des variables directement depuis le DSFR, vous devez installer leur librairie :
 
 <Tabs
  tabs={[
@@ -14,7 +14,7 @@ Mais comme notre fichier `.scss` importe des variables directement depuis le DSF
  ]}
 />
 
-Et comme la librairie DSFR utilise des alias lors de ces imports de style, nous somme obligés de définir d'en définir un minimum pour que la compilation SCSS fonctionne dans votre "module bundler" :
+Et comme la librairie DSFR utilise des alias lors de ces imports de style, nous somme obligés d'en définir un minimum pour que la compilation SCSS fonctionne dans le préprocesseur :
 
 <Tabs
  tabs={[

apps/docs/stories/usage/vuetify-v3-vite.mdx

@@ -0,0 +1,8 @@
+Dans votre fichier `vite.config.js` vous devez adapter votre configuration actuelle pour avoir :
+
+```ts
+vuetify({
+ // ...
+ styles: { configFile: 'node_modules/dsfr-connect/src/vuetify-v3/settings.scss' },
+});
+```

apps/docs/stories/usage/vuetify-v3-webpack.mdx

@@ -0,0 +1,8 @@
+Dans votre fichier `webpack.config.js` vous devez adapter votre configuration actuelle pour avoir :
+
+```ts
+new VuetifyPlugin({
+ // ...
+ styles: { configFile: 'node_modules/dsfr-connect/src/vuetify-v3/settings.scss' },
+});
+```

apps/docs/stories/usage/vuetify-v3.stories.mdx

@@ -1,25 +1,31 @@
+import { Tabs } from '@codegouvfr/react-dsfr/Tabs';
 import { Meta } from '@storybook/blocks';
 
+import DsfrScssExplanation from '@dsfrc/docs/stories/usage/dsfr-scss.mdx';
+import ViteTab from '@dsfrc/docs/stories/usage/vuetify-v3-vite.mdx';
+import WebpackTab from '@dsfrc/docs/stories/usage/vuetify-v3-webpack.mdx';
+
 <Meta title="dsfr-connect/Utilisation/vuetify-v3" />
 
 # vuetify-v3
 
 Personnaliser Vuetify se fait en 2 temps :
 
 1. on utilise un thème JavaScript pour définir les couleurs principales
-2. on utilise un thème SASS/CSS pour modifier la composition de l'application et des composants
+2. on utilise un thème SASS/SCSS pour modifier la composition de l'application et des composants
 
 Tout d'abord, adaptez votre initialisation du plugin Vuetify :
 
 ```ts
 import '@mdi/font/css/materialdesignicons.css';
-import { getVuetifyOptions } from 'dsfr-connect/src/vuetify-v3';
 import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
 import * as labsComponents from 'vuetify/labs/components';
 import 'vuetify/styles';
 
+import { getVuetifyOptions } from 'dsfr-connect/dist/vuetify-v3';
+
 export default createVuetify({
  components: { components, labsComponents },
  directives,
@@ -29,18 +35,15 @@ export default createVuetify({
 
 Si besoin, se référer à la documentation officielle : [https://v3.vuetifyjs.com/en/getting-started/installation/](https://v3.vuetifyjs.com/en/getting-started/installation/)
 
-Ensuite la partie plus compliqué est que le style des composants est géré différemment de celui de l'application. Il faut modifier le préprocesseur que vous utilisez (Vite/Webpack) afin de lui dire d'utiliser une feuille de style spécifique pour compiler les composants Vuetify. Cela devrait ressembler à :
-
-```ts
-// Vite/Nuxt
-vuetify({
- styles: { configFile: 'dsfr-connect/src/vuetify-v3/settings.scss' },
-});
+Ensuite il faut modifier le préprocesseur que vous utilisez afin de lui dire d'utiliser une feuille de style spécifique pour compiler les composants Vuetify.
 
-// Webpack/Vue CLI
-new VuetifyPlugin({
- styles: { configFile: 'dsfr-connect/src/vuetify-v3/settings.scss' },
-});
-```
+<Tabs
+ tabs={[
+ { label: 'Projet utilisant Webpack', isDefault: true, content: <WebpackTab /> },
+ { label: 'Projet utilisant Vite', isDefault: false, content: <ViteTab /> },
+ ]}
+/>
 
 Les démarches pour importer ces helpers sont détaillées sur [https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables](https://vuetifyjs.com/en/features/sass-variables/#component-specific-variables).
+
+<DsfrScssExplanation />