fix: correct scss imports so we do not break consumer builds

fix #329

src/components/badge/badge.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 /**
  * @prop --background-color: The color to use for the badge behind the icon.
  */

src/components/button-group/button-group.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 limel-button-group {
     align-items: center;
     display: flex;

src/components/button/button.scss

@@ -1,3 +1,4 @@
+@import '../../style/variables';
 @import "@lime-material/button/mdc-button";
 
 :host {

src/components/chip-set/chip-set.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 $mdc-textarea-background: $mdc-theme-background;
 // $mdc-textarea-disabled-background: $mdc-theme-background;
 

src/components/collapsible-section/collapsible-section.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 :host {
     display: block;
 }

src/components/date-picker/date-picker.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import '@lime-material/theme/mdc-theme';
 @import '../../../node_modules/flatpickr/dist/flatpickr.min.css';
 

src/components/dialog/dialog.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 $mdc-dialog-max-width: false;
 $mdc-dialog-max-height: false;
 @import "@lime-material/dialog/mdc-dialog";

src/components/grid/grid.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 /**
  * @prop --lime-grid-area: Grid layout
  * @prop --lime-grid-columns: Number of columns in the grid, defaults to 8

src/components/icon-button/icon-button.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/icon-button/mdc-icon-button";
 
 :host {

src/components/icon/icon.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 :host {
     background-color: rgba(0, 0, 0, 0);
     display: inline-block;

src/components/input-field/input-field.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 $mdc-textarea-background: $mdc-theme-background;
 // $mdc-textarea-disabled-background: $mdc-theme-background;
 

src/components/linear-progress/linear-progress.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/linear-progress/mdc-linear-progress";
 
 /**

src/components/list/list.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/list/mdc-list";
 
 /**

src/components/menu/menu.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/list/mdc-list";
 @import "@lime-material/menu/mdc-menu";
 @import "@lime-material/menu-surface/mdc-menu-surface";

src/components/multi-select/multi-select.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import '@lime-material/form-field/mdc-form-field';
 @import '@lime-material/checkbox/mdc-checkbox';
 @import "@lime-material/floating-label/mdc-floating-label";

src/components/picker/picker.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/elevation/mdc-elevation";
 @import "@lime-material/menu-surface/mdc-menu-surface";
 

src/components/select/select.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 $mdc-select-fill-color: $mdc-theme-background;
 $mdc-select-bottom-line-idle-color: $lime-text-field-bottom-line-color;
 $mdc-select-bottom-line-hover-color: $lime-text-field-bottom-line-color;

src/components/slider/slider.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import '@lime-material/slider/mdc-slider';
 @import "@lime-material/floating-label/mdc-floating-label";
 

src/components/snackbar/snackbar.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/button/mdc-button";
 @import "@lime-material/snackbar/mdc-snackbar";
 

src/components/spinner/spinner.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 :host {
     animation-duration: 1s;
     animation-iteration-count: infinite;

src/components/switch/switch.scss

@@ -1,3 +1,5 @@
+@import '../../style/variables';
+
 @import "@lime-material/switch/mdc-switch";
 
 .mdc-switch {

stencil.config.dist.ts

@@ -7,13 +7,10 @@ const targetDist: OutputTargetDist = {
 };
 
 export const config: Config = {
+    copy: [{ src: 'style/' }],
     namespace: 'lime-elements',
     outputTargets: [targetDist],
-    plugins: [
-        sass({
-            injectGlobalPaths: ['src/style/variables.scss'],
-        }),
-    ],
+    plugins: [sass()],
     excludeSrc: [
         '**/test/**',
         '**/examples/**',

stencil.config.docs.ts

@@ -19,11 +19,7 @@ export const config: Config = {
     hashFileNames: false,
     namespace: 'lime-elements',
     outputTargets: [targetWww],
-    plugins: [
-        sass({
-            injectGlobalPaths: ['src/style/variables.scss'],
-        }),
-    ],
+    plugins: [sass()],
     globalScript: 'src/global/index.ts',
     globalStyle: 'src/global/colors.scss',
 };

stencil.config.ts

@@ -17,11 +17,7 @@ export const config: Config = {
     ],
     namespace: 'lime-elements',
     outputTargets: [targetWww],
-    plugins: [
-        sass({
-            injectGlobalPaths: ['src/style/variables.scss'],
-        }),
-    ],
+    plugins: [sass()],
     tsconfig: './tsconfig.dev.json',
     globalScript: 'src/global/index.ts',
     globalStyle: 'src/global/colors.scss',