@vcita/design-system 1.11.18 → 1.11.20

package/README.md

@@ -60,7 +60,7 @@ export default DesignSystemInit(config);
 All configuration options are specified [here](#available-configuration-options)
 
 ### Applying the styling to your project
-create the file src/styles/variables.scss and edit to fit your needs. you may only need the import statement.
+Create the file src/styles/variables.scss and edit to fit your needs. you may only need the import statement.
 ```
 @import "~@vcita/design-system/styles/variables.scss";
 ```
@@ -68,6 +68,33 @@ In order to load the variables.scss file, add this to src/main.js
 ```
 import "@/../styles/variables.scss";
 ```
+Create the file src/styles/vuetify-variables.scss
+
+```
+@forward "~@vcita/design-system/styles/vuetify-variables.scss";
+
+// Vuetify variables can be modified here,
+// BUT! please consider if they should be set here or in the design system project
+```
+
+In order to load the vuetify-variables.scss file, in vue.config.js add this value
+
+```
+css: {
+    loaderOptions: {
+      sass: {
+        // Here we can specify the older indent syntax formatted SASS
+        // Note that there is *not* a semicolon at the end of the below line
+        additionalData: `@import "@/../styles/vuetify-variables.scss"`
+      },
+      scss: {
+        // Here we can use the newer SCSS flavor of Sass.
+        // Note that there *is* a semicolon at the end of the below line
+        additionalData: `@import "@/../styles/vuetify-variables.scss";`
+      }
+    }
+  }
+```
 
 Please note: to receive the theme in your components, make sure to initialize your app using the v-app tag.
 Your App.vue will look something like this: