feat: switch the css preprocessor from stylus to sass

frontend/package.tmpl.json

 {
   "name": "{{.ProjectName}}",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -16,8 +16,8 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
-    "serve": "^12.0.0",
-    "stylus": "^0.54.7",
-    "stylus-loader": "^3.0.2"
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "serve": "^12.0.0"
   }
 }

frontend/src/App.vue

@@ -84,21 +84,23 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="scss">
 @import url("./assets/css/reset.css");
+
 html,
 body {
   width: 100%;
   height: 100%;
-  margin 0
-  padding 0
+  margin: 0;
+  padding: 0;
 }
+
 #app {
   position: relative;
   // width: 900px;
   // height: 520px;
-  width 100%
-  height 100%
+  width: 100%;
+  height: 100%;
   background-color: #dbbcef;
 }
 .header {
@@ -116,7 +118,7 @@ body {
       min-width: 50px;
       height: 30px;
       line-height: 30px;
-      padding 0 5px
+      padding: 0 5px;
       margin-right: 8px;
       background-color: #ab7edc;
       border-radius: 2px;
@@ -124,7 +126,7 @@ body {
       text-decoration: none;
       color: #000000;
       font-size: 14px;
-      white-space nowrap
+      white-space: nowrap;
       &:hover,
       &.router-link-exact-active {
         background-color: #d7a8d8;
@@ -148,13 +150,13 @@ body {
         min-width: 50px;
         height: 30px;
         line-height: 30px;
-        padding 0 5px
+        padding: 0 5px;
         background-color: transparent;
         text-align: center;
         text-decoration: none;
         color: #000000;
         font-size: 14px;
-        &:hover{
+        &:hover {
           background-color: #ff050542;
           cursor: pointer;
         }
@@ -170,14 +172,14 @@ body {
       flex-direction: row;
       flex-wrap: nowrap;
       align-items: center;
-      justify-content flex-end
-      min-width 150px
+      justify-content: flex-end;
+      min-width: 150px;
       .bar-btn {
         display: inline-block;
         min-width: 50px;
         height: 30px;
         line-height: 30px;
-        padding 0 5px
+        padding: 0 5px;
         margin-left: 8px;
         background-color: #ab7edc;
         border-radius: 2px;
@@ -201,6 +203,6 @@ body {
   left: 0;
   right: 0;
   bottom: 0;
-  overflow hidden
+  overflow: hidden;
 }
 </style>

frontend/src/components/public/OpenLink.vue

@@ -28,9 +28,9 @@ export default {
 };
 </script>
 
-<style lang="stylus">
-.openlink{
-  cursor pointer
-  text-decoration underline
+<style lang="scss">
+.openlink {
+  cursor: pointer;
+  text-decoration: underline;
 }
 </style>

frontend/src/views/About.vue

@@ -29,32 +29,31 @@
     <div class="thank">{{ $t('aboutpage.thanks') }}</div>
   </div>
 </template>
-<style lang="stylus">
-.about{
-  .title{
-    margin 30px auto
-    font-size 36px
-    color #a150b5
-    text-align center
+<style lang="scss">
+.about {
+  .title {
+    margin: 30px auto;
+    font-size: 36px;
+    color: #a150b5;
+    text-align: center;
   }
-  .info{
-    margin 14px 60px
+  .info {
+    margin: 14px 60px;
     // background-color red
-    font-size 24px
-    .info-item{
-      height 60px
-      line-height 60px
-      white-space nowrap
-      .name{
-        color #6d6363
-
+    font-size: 24px;
+    .info-item {
+      height: 60px;
+      line-height: 60px;
+      white-space: nowrap;
+      .name {
+        color: #6d6363;
       }
-      .link{
-        color #5f6c86
+      .link {
+        color: #5f6c86;
       }
     }
   }
-  .thank{
+  .thank {
     height: 68px;
     line-height: 68px;
     margin: 47px auto;

frontend/src/views/Home.vue

@@ -6,7 +6,10 @@
     <!-- Bottom button -->
     <!-- 底部按钮 -->
     <div class="link">
-      <OpenLink href="https://beta.wails.io" class="btn start">{{ $t('homepage.getting-started') }}</OpenLink>
+      <OpenLink
+        href="https://github.com/wailsapp/wails#nav-6"
+        class="btn start"
+      >{{ $t('homepage.getting-started') }}</OpenLink>
       <OpenLink
         href="https://github.com/misitebao/wails-template-vue"
         class="btn star"
@@ -29,22 +32,22 @@ export default {
   },
 };
 </script>
-<style lang="stylus">
-.home{
-  .logo{
-    display block
-    width 620px
-    height 280px
-    margin 30px auto 10px
+<style lang="scss">
+.home {
+  .logo {
+    display: block;
+    width: 620px;
+    height: 280px;
+    margin: 30px auto 10px;
   }
-  .link{
-    display flex
-    flex-direction row
-    flex-wrap nowrap
-    align-items center
-    justify-content center
-    margin 24px auto
-    .btn{
+  .link {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    margin: 24px auto;
+    .btn {
       display: block;
       width: 150px;
       height: 50px;
@@ -57,18 +60,18 @@ export default {
       white-space: nowrap;
       text-decoration: none;
       cursor: pointer;
-      &.start{
-        background-color #fd0404
-        color #ffffff
-        &:hover{
-          background-color #ec2e2e
+      &.start {
+        background-color: #fd0404;
+        color: #ffffff;
+        &:hover {
+          background-color: #ec2e2e;
         }
       }
-      &.star{
-        background-color #ffffff
-        color #fd0404
-        &:hover{
-          background-color #f3f3f3
+      &.star {
+        background-color: #ffffff;
+        color: #fd0404;
+        &:hover {
+          background-color: #f3f3f3;
         }
       }
     }