Interesting note.

An apparent limitation of vue-cli's SASS processing means we need to create a new webpack loader to handle .scss partials. Potential solutions noted on issue #2 For now, manually include core files in a basic assumed order.
davewallace · Apr 24, 2018 · 2063025 · 2063025
1 parent ec67bc0
commit 2063025
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 13 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,11 +5,8 @@
 </template>
 
 <style lang="scss">
-  /**
-   * All imports and contextual SCSS must be contained within this single style tag
-   */
-  @import "style/reset.scss";
   @import "style/variables.scss";
+  @import "style/reset.scss";
 
   body {
     background: $color__base;

diff --git a/src/components/containers/SortableGrid.vue b/src/components/containers/SortableGrid.vue
@@ -49,11 +49,8 @@
 </template>
 
 <style lang="scss">
-/**
- * All imports and contextual SCSS must be contained within this single style tag
- */
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 
 .sortable-grid {
 

diff --git a/src/components/ui/Button.vue b/src/components/ui/Button.vue
@@ -14,8 +14,8 @@
 
 <style scoped lang="scss">
 
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 @import "../../style/utility.scss";
 
 .button {

diff --git a/src/components/ui/Icon.vue b/src/components/ui/Icon.vue
@@ -4,8 +4,8 @@
 
 <style scoped lang="scss">
 
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 
 i {
   display: inline-block;

diff --git a/src/components/ui/Layout.vue b/src/components/ui/Layout.vue
@@ -9,8 +9,8 @@
 
 <style scoped lang="scss">
 
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 @import "../../style/utility.scss";
 
 .layout-item {

diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
@@ -52,8 +52,8 @@
 
 <style lang="scss">
 
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 @import "../../style/utility.scss";
 
 // applied to body element in response to modal component's visible state

diff --git a/src/components/ui/Notification.vue b/src/components/ui/Notification.vue
@@ -7,8 +7,8 @@
 
 <style scoped lang="scss">
 
-@import "../../style/reset.scss";
 @import "../../style/variables.scss";
+@import "../../style/reset.scss";
 
 .notification {
   border: 2px dashed green;

diff --git a/src/style/reset.scss b/src/style/reset.scss
@@ -1,3 +1,5 @@
+@import "variables.scss";
+
 /**
  * Note that this reset handles only the very basic HTML elements
  * in favour of BEM within components setting purposeful styles.