refactoring style

src/components/Apple/style.scss

@@ -1,5 +1,4 @@
-@import '../../app.scss';
-
+@import '../../style/mixins.scss';
 
 .apple-out {
   visibility: hidden;

src/components/Button/style.scss

@@ -1,4 +1,4 @@
-@import '../../app.scss';
+@import '../../style/mixins.scss';
 
 $shake-color: #a77600;
 

src/components/Tree/style.scss

@@ -1,4 +1,4 @@
-@import '../../app.scss';
+@import '../../style/mixins.scss';
 
 .shake-tree {
   animation: shake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

src/index.js

@@ -5,6 +5,8 @@ import { Provider } from 'react-redux';
 import App from './containers/App';
 import configureStore from './configureStore';
 
+import './style/global.scss';
+
 const store = configureStore();
 const MOUNT_NODE = document.getElementById('app');
 

src/style/global.scss

@@ -0,0 +1,11 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+}

src/app.scss → src/style/mixins.scss

@@ -1,10 +1,3 @@
-html,
-body {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
 // translate3d
 @mixin translate3d($x, $y, $z) {
   -webkit-transform: translate3d($x, $y, $z);