Remove scss extension

src/App.vue

@@ -310,11 +310,11 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss">
     @import url(https://fonts.googleapis.com/css?family=Fira+Sans:700|Roboto:400,400italic,700);
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 </style>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     #app {
         background-color: $color-gray;

src/components/DevDebug.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .dev-debug {
     width: 400px;

src/components/GameBoard/GameBoardPlaceholder.vue

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .gameboard-placeholder {
         user-select: none;

src/components/GameCards/GameCardDefault.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     $gameCoverWidth: 80px;
 

src/components/GameCards/GameCardGrid.vue

@@ -17,7 +17,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-card {
         display: flex;

src/components/GameCards/GameCardSearch.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-card {
         background-color: $color-white;

src/components/GameCards/GameCardText.vue

@@ -53,7 +53,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     $gameCoverWidth: 80px;
 

src/components/GameCards/GameCardWide.vue

@@ -61,7 +61,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-card {
         background-color: $color-white;

src/components/GameDetail/GameDetailPlaceholder.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .game-detail-placeholder {
     display: flex;

src/components/GameDetail/GameHeader.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-header {
         display: flex;

src/components/GameDetail/GameLinks.vue

@@ -73,7 +73,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-links {
         border-top: 1px solid $color-light-gray;

src/components/GameDetail/GameRating.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .game-rating {
     color: $color-orange;

src/components/GameDetail/GameReviewBox.vue

@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .review-box {
     text-align: left;

src/components/GameDetail/GameScreenshots.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-screenshots {
         padding: $gp / 2 $gp;
@@ -106,7 +106,7 @@ export default {
 </style>
 
 <style lang="scss" rel="stylesheet/scss">
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .blueimp-gallery {
 

src/components/GameDetail/GameVideos.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-videos {
         text-align: center;

src/components/GameNotes.vue

@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .dark .note {
         border-color: $color-gray;

src/components/GameSearch.vue

@@ -163,7 +163,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-search {
         background-color: $color-light-gray;

src/components/IgdbCredit.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .igdb-credit {
         color: $color-igdb-green;

src/components/Lists/List.vue

@@ -274,7 +274,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .list {
         flex-shrink: 0;

src/components/Lists/ListNameEdit.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .list-name {
         cursor: pointer;

src/components/Lists/ListSettings.vue

@@ -269,7 +269,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .list-settings {
         background: $color-light-gray;

src/components/Modal.vue

@@ -119,7 +119,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .modal {
     align-items: center;

src/components/NavHeader.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     nav {
         user-select: none;
         width: 100vw;

src/components/Panel.vue

@@ -10,7 +10,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .panel {
     padding: $gp / 2;

src/components/Placeholder.vue

@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .placeholder {
         max-width: 100%;

src/components/Platforms/Platform.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .platform {
         padding: $gp;

src/components/Releases/Releases.vue

@@ -69,7 +69,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .release {
         margin-bottom: $gp;

src/components/Releases/ReleasesPlaceholder.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .release {
         border-bottom: 1px solid $color-light-gray;

src/components/Settings/AccountSettings.vue

@@ -114,7 +114,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     @import "settings";
 
     .profile {

src/components/Settings/GameBoardSettings.vue

@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     @import "settings";
 
     .list-settings {

src/components/Settings/GeneralSettings.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     @import "settings";
 
     .reloading {

src/components/Settings/PlatformsSettings.vue

@@ -46,6 +46,6 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     @import "settings";
 </style>

src/components/Settings/TagsSettings.vue

@@ -172,7 +172,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .tags-settings {
         display: grid;

src/components/Tag.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .tag {
         border-radius: 100px;

src/components/Toast.vue

@@ -75,7 +75,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .toast {
     display: flex;

src/components/ToggleSwitch.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles.scss";
+@import "~styles/styles";
 
 .toggle-switch {
     display: inline-flex;

src/components/WallpaperUpload.vue

@@ -167,7 +167,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
     @import "src/components/Settings/_settings.scss";
 
     img.preview {

src/pages/GameBoard.vue

@@ -252,7 +252,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .draggable * {
         color: $color-white;

src/pages/GameDetail.vue

@@ -191,7 +191,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .game-detail {
         display: flex;

src/pages/NotFound.vue

@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .not-found-page {
         color: $color-dark-gray;

src/pages/Platforms.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .platforms-page {
         color: $color-dark-gray;

src/pages/SessionExpired.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .session-expired {
         color: $color-dark-gray;

src/pages/Settings.vue

@@ -154,7 +154,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     .settings {
         display: flex;

src/pages/ShareList.vue

@@ -109,7 +109,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-    @import "~styles/styles.scss";
+    @import "~styles/styles";
 
     main {
         align-items: flex-start;