feat: initialize project with corresponding CSS pre-processor (close #930)

Author: yyx990803

packages/@vue/cli-service/generator/template/src/App.vue

@@ -28,7 +28,16 @@ export default {
 </template>
 <%_ } _%>
 
-<style>
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
+<style<%-
+  rootOptions.cssPreprocessor
+    ? ` lang="${
+        rootOptions.cssPreprocessor === 'sass'
+          ? 'scss'
+          : rootOptions.cssPreprocessor
+      }"`
+    : ``
+%>>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -40,7 +49,7 @@ export default {
   <%_ } _%>
 }
 <%_ if (rootOptions.router) { _%>
-
+  <%_ if (!rootOptions.cssPreprocessor) { _%>
 #nav {
   padding: 30px;
 }
@@ -53,5 +62,40 @@ export default {
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+  <%_ } else { _%>
+#nav {
+  padding: 30px;
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+  <%_ } _%>
+<%_ } _%>
+</style>
+<%_ } else { _%>
+<style lang="stylus">
+#app
+  font-family 'Avenir', Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  text-align center
+  color #2c3e50
+  <%_ if (!rootOptions.router) { _%>
+  margin-top 60px
+  <%_ } _%>
+<%_ if (rootOptions.router) { _%>
+
+#nav
+  padding 30px
+  a
+    font-weight bold
+    color #2c3e50
+    &.router-link-exact-active
+      color #42b983
 <%_ } _%>
 </style>
+<%_ } _%>

packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue

@@ -40,7 +40,16 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
+<style scoped<%-
+  rootOptions.cssPreprocessor
+    ? ` lang="${
+        rootOptions.cssPreprocessor === 'sass'
+          ? 'scss'
+          : rootOptions.cssPreprocessor
+      }"`
+    : ``
+%>>
 h3 {
   margin: 40px 0 0;
 }
@@ -56,3 +65,20 @@ a {
   color: #42b983;
 }
 </style>
+<%_ } else { _%>
+<style scoped lang="stylus">
+h3
+  margin 40px 0 0
+
+ul
+  list-style-type none
+  padding 0
+
+li
+  display inline-block
+  margin 0 10px
+
+a
+  color #42b983
+</style>
+<%_ } _%>