➕ add stylus to package.json, move some style from App.scss to App.styl

Author: kitze

package.json

@@ -28,18 +28,14 @@
     "babel-eslint": "6.1.2",
     "babel-jest": "15.0.0",
     "babel-loader": "6.2.5",
-    "babel-preset-react-app": "^0.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-react-app": "^0.2.1",
     "babel-preset-stage-0": "^6.5.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
     "cross-spawn": "4.0.0",
     "css-loader": "0.24.0",
-    "less": "^2.7.1",
-    "less-loader": "^2.2.3",
-    "node-sass": "^3.10.0",
-    "sass-loader": "^4.0.2",
     "detect-port": "1.0.0",
     "dotenv": "2.0.0",
     "eslint": "3.5.0",
@@ -59,16 +55,21 @@
     "http-proxy-middleware": "0.17.1",
     "jest": "15.1.1",
     "json-loader": "0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "node-sass": "^3.10.0",
     "object-assign": "4.1.0",
     "path-exists": "2.1.0",
     "postcss-loader": "0.13.0",
     "promise": "7.1.1",
     "react-dev-utils": "^0.2.1",
     "recursive-readdir": "2.1.0",
     "rimraf": "2.5.4",
+    "sass-loader": "^4.0.2",
     "strip-ansi": "3.0.1",
     "style-loader": "0.13.1",
-    "stylus-loader": "2.3.1",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^2.3.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
     "webpack-dev-server": "1.16.1",

template/src/App.scss

@@ -1,19 +1,3 @@
-:global {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-    height: 80px;
-  }
-
-  @keyframes App-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
 .App {
   &-header {
     background-color: #222;

template/src/App.styl

@@ -1,21 +1,9 @@
-.App
-  text-align center
-
 .App-logo
   animation App-logo-spin infinite 20s linear
   height 80px
 
-.App-header
-  background-color #222
-  height 150px
-  padding 20px
-  color white
-
-.App-intro
-  font-size large
-
 @keyframes App-logo-spin
   from
     transform rotate(0deg)
   to
-    transform rotate(360deg)
+    transform rotate(360deg)