diff --git a/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.scss b/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.scss
deleted file mode 100644
index 92555e96070..00000000000
--- a/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities/spacing";
-
-@import "scss/theme/blue.scss";
-@import "scss/mixins";
-
-
-// TODO: build reusable icon menu? Maybe make into a component?
-// The existing one has lots of reusability problems
-
-.operations {
-    margin-bottom: 0;
-
-    ul {
-        @include list_reset();
-        display: flex;
-        li:not(:first-child) {
-            @extend .ml-2;
-        }
-    }
-}
-
-
-// General Layout
-
-.cloud-auth {
-
-    // header sticks, bottom part scrolls
-    @include scrollingListLayout("header", ".scroll-container");
-
-    // title left, icons right
-    .cloud-auth-title {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-    
-    
-        // top icon menu
-        .operations {
-
-            li {
-                a, a::before {
-                    font-size: 1rem;
-                    color: $gray-400;
-                }
-                a.active::before, 
-                a:hover::before {
-                    color: $brand-primary;
-                }
-            }
-            
-            .cloudKeyHelp a {
-                @include fontawesome($fa-var-info-circle);
-            }
-            .cloudKeyFilter a {
-                @include fontawesome($fa-var-filter);
-            }
-            .createCloudKey a {
-                @include fontawesome($fa-var-plus);
-            }
-        }
-    }
-}
-
-
-// Single list item
-
-.cloud-auth-key {
-
-    header hgroup {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-        
-        > * {
-            margin-bottom: 0;
-        }
-    }
-
-    form {
-        @extend .my-3;
-        @extend .pt-3;
-
-        // removes wierd double arrows on select
-        .custom-select {
-            background: none; 
-        }
-        
-        // Undo butchering from base.css so side-by-side labels work
-        .form-row {
-            display: flex;
-            input, select {
-                max-width: none;
-            }
-            label {
-                font-weight: 400;
-            }
-        }
-
-        // button list at bottom of form
-        footer {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            @extend .pt-3;
-
-            button:not(:first-child) {
-                @extend .ml-1;
-            }
-        }
-    }
-
-
-    // icon menu
-
-    .operations {
-        .save a {
-            @include fontawesome($fa-var-save)
-        }
-        .delete a {
-            @include fontawesome($fa-var-times);
-        }
-        .details a {
-            @include fontawesome($fa-var-window-minimize);
-            &:hover {
-                @include fontawesome($fa-var-window-maximize);
-            }
-        }
-    }
-
-
-    // reverse icons when key is expanded
-
-    &.expanded .details a {
-        @include fontawesome($fa-var-window-maximize);
-        &:hover {
-            @include fontawesome($fa-var-window-minimize);
-        }
-    }
-
-}
-
-
-// Transitions
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity .5s;
-}
-
-.fade-enter, 
-.fade-leave-to {
-    opacity: 0;
-}
-
-
-// Delete modal
-
-#deleteCredentialModal {
-    .modal-body {
-        display: none;
-    }
-    .modal-dialog {
-        max-width: 300px; 
-    }
-}
diff --git a/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.vue b/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.vue
index 7d3c4dff92c..43685ccee8c 100644
--- a/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.vue
+++ b/client/galaxy/scripts/components/User/CloudAuth/CloudAuth.vue
@@ -207,4 +207,177 @@ export default {
 
 </script>
 
-<style lang="scss" src="./CloudAuth.scss"></style>
+<style lang="scss">
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities/spacing";
+
+@import "scss/theme/blue.scss";
+@import "scss/mixins";
+
+
+// TODO: build reusable icon menu? Maybe make into a component?
+// The existing one has lots of reusability problems
+
+.operations {
+    margin-bottom: 0;
+
+    ul {
+        @include list_reset();
+        display: flex;
+        li:not(:first-child) {
+            @extend .ml-2;
+        }
+    }
+}
+
+
+// General Layout
+
+.cloud-auth {
+
+    // header sticks, bottom part scrolls
+    @include scrollingListLayout("header", ".scroll-container");
+
+    // title left, icons right
+    .cloud-auth-title {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    
+    
+        // top icon menu
+        .operations {
+
+            li {
+                a, a::before {
+                    font-size: 1rem;
+                    color: $gray-400;
+                }
+                a.active::before, 
+                a:hover::before {
+                    color: $brand-primary;
+                }
+            }
+            
+            .cloudKeyHelp a {
+                @include fontawesome($fa-var-info-circle);
+            }
+            .cloudKeyFilter a {
+                @include fontawesome($fa-var-filter);
+            }
+            .createCloudKey a {
+                @include fontawesome($fa-var-plus);
+            }
+        }
+    }
+}
+
+
+// Single list item
+
+.cloud-auth-key {
+
+    header hgroup {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        
+        > * {
+            margin-bottom: 0;
+        }
+    }
+
+    form {
+        @extend .my-3;
+        @extend .pt-3;
+
+        // removes wierd double arrows on select
+        .custom-select {
+            background: none; 
+        }
+        
+        // Undo butchering from base.css so side-by-side labels work
+        .form-row {
+            display: flex;
+            input, select {
+                max-width: none;
+            }
+            label {
+                font-weight: 400;
+            }
+        }
+
+        // button list at bottom of form
+        footer {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            @extend .pt-3;
+
+            button:not(:first-child) {
+                @extend .ml-1;
+            }
+        }
+    }
+
+
+    // icon menu
+
+    .operations {
+        .save a {
+            @include fontawesome($fa-var-save)
+        }
+        .delete a {
+            @include fontawesome($fa-var-times);
+        }
+        .details a {
+            @include fontawesome($fa-var-window-minimize);
+            &:hover {
+                @include fontawesome($fa-var-window-maximize);
+            }
+        }
+    }
+
+
+    // reverse icons when key is expanded
+
+    &.expanded .details a {
+        @include fontawesome($fa-var-window-maximize);
+        &:hover {
+            @include fontawesome($fa-var-window-minimize);
+        }
+    }
+
+}
+
+
+// Transitions
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .5s;
+}
+
+.fade-enter, 
+.fade-leave-to {
+    opacity: 0;
+}
+
+
+// Delete modal
+
+#deleteCredentialModal {
+    .modal-body {
+        display: none;
+    }
+    .modal-dialog {
+        max-width: 300px; 
+    }
+}
+</style>