diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index c8f20dde61d..d68a7941204 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/packages/babel-preset-react-app/index.js
@@ -8,7 +8,39 @@
  */
 'use strict';
 
+const { join } = require('path');
+const { existsSync } = require('fs');
+
+const path = join(
+  __dirname,
+  '..',
+  '..',
+  '..',
+  'resources',
+  'graphql',
+  'schema.json'
+);
+
+if (!existsSync(path)) {
+  throw new Error(
+    'Your graphql schema must be in ./resources/graphql/schema.json'
+  );
+}
+
 const plugins = [
+  // Support for Relay modern.
+  [
+    require.resolve('babel-plugin-relay'),
+    {
+      compat: true,
+      schema: path,
+    },
+  ],
+  // enable export extension experimental feature
+  require.resolve('babel-plugin-transform-export-extensions'),
+  // load decorators before class plugin
+  require.resolve('babel-plugin-transform-decorators-legacy'),
+
   // class { handleClick = () => { } }
   require.resolve('babel-plugin-transform-class-properties'),
   // The following two plugins use Object.assign directly, instead of Babel's
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
index 175b7b1297f..23dd1544a33 100644
--- a/packages/babel-preset-react-app/package.json
+++ b/packages/babel-preset-react-app/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "babel-preset-react-app",
-  "version": "3.0.0",
+  "name": "@timelab/babel-preset-react-app",
+  "version": "3.1.2",
   "description": "Babel preset used by Create React App",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
@@ -12,8 +12,11 @@
   ],
   "dependencies": {
     "babel-plugin-dynamic-import-node": "1.0.2",
+    "babel-plugin-relay": "^1.0.1",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
     "babel-plugin-transform-react-constant-elements": "6.23.0",
     "babel-plugin-transform-react-jsx": "6.24.1",
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index 88c909e1154..fccea4e8afb 100644
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "babel-cli": "6.24.1",
     "babel-eslint": "7.2.3",
-    "babel-preset-react-app": "^3.0.0",
+    "@timelab/babel-preset-react-app": "^3.1.0",
     "cross-env": "5.0.0",
     "eslint": "3.19.0",
     "eslint-config-react-app": "^1.0.4",
diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js
index bee55b1b156..3005e62c09d 100644
--- a/packages/react-scripts/config/jest/babelTransform.js
+++ b/packages/react-scripts/config/jest/babelTransform.js
@@ -11,6 +11,6 @@
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
-  presets: [require.resolve('babel-preset-react-app')],
+  presets: [require.resolve('@timelab/babel-preset-react-app')],
   babelrc: false,
 });
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index adf92f5b124..d28ac712156 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -166,6 +166,7 @@ module.exports = {
           /\.gif$/,
           /\.jpe?g$/,
           /\.png$/,
+          /\.(scss|sass)$/,
         ],
         loader: require.resolve('file-loader'),
         options: {
@@ -191,7 +192,7 @@ module.exports = {
         options: {
           // @remove-on-eject-begin
           babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
+          presets: [require.resolve('@timelab/babel-preset-react-app')],
           // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -236,6 +237,39 @@ module.exports = {
       },
       // ** STOP ** Are you adding a new loader?
       // Remember to add the new extension(s) to the "file" loader exclusion list.
+      {
+        test: /(\.scss|\.sass)$/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: require.resolve('postcss-loader'),
+            options: {
+              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+              plugins: () => [
+                require('postcss-flexbugs-fixes'),
+                autoprefixer({
+                  browsers: [
+                    '>1%',
+                    'last 4 versions',
+                    'Firefox ESR',
+                    'not ie < 9', // React doesn't support IE8 anyway
+                  ],
+                  flexbox: 'no-2009',
+                }),
+              ],
+            },
+          },
+          {
+            loader: require.resolve('sass-loader')
+          }
+        ]
+      },
     ],
   },
   plugins: [
@@ -269,6 +303,8 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    // remove ajv warning
+    new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 5943c14502c..0d48bb8793b 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -165,6 +165,7 @@ module.exports = {
           /\.gif$/,
           /\.jpe?g$/,
           /\.png$/,
+          /\.(scss|sass)$/,
         ],
         loader: require.resolve('file-loader'),
         options: {
@@ -189,7 +190,7 @@ module.exports = {
         // @remove-on-eject-begin
         options: {
           babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
+          presets: [require.resolve('@timelab/babel-preset-react-app')],
         },
         // @remove-on-eject-end
       },
@@ -247,6 +248,49 @@ module.exports = {
       },
       // ** STOP ** Are you adding a new loader?
       // Remember to add the new extension(s) to the "file" loader exclusion list.
+      {
+        test: /(\.scss|\.sass)$/,
+        loader: ExtractTextPlugin.extract(
+          Object.assign(
+            {
+              fallback: require.resolve('style-loader'),
+              use: [
+                {
+                  loader: require.resolve('css-loader'),
+                  options: {
+                    importLoaders: 1,
+                    minimize: true,
+                    sourceMap: true,
+                  },
+                },
+                {
+                  loader: require.resolve('postcss-loader'),
+                  options: {
+                    ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+                    plugins: () => [
+                      require('postcss-flexbugs-fixes'),
+                      autoprefixer({
+                        browsers: [
+                          '>1%',
+                          'last 4 versions',
+                          'Firefox ESR',
+                          'not ie < 9', // React doesn't support IE8 anyway
+                        ],
+                        flexbox: 'no-2009',
+                      }),
+                    ],
+                  },
+                },
+                {
+                  loader: require.resolve('sass-loader')
+                }
+              ],
+            },
+            extractTextPluginOptions
+          )
+        ),
+        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
+      },
     ],
   },
   plugins: [
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index e6879f756af..546ce191568 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-scripts",
-  "version": "1.0.7",
+  "name": "@timelab/react-scripts",
+  "version": "1.0.9",
   "description": "Configuration and scripts for Create React App.",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
@@ -21,12 +21,12 @@
     "react-scripts": "./bin/react-scripts.js"
   },
   "dependencies": {
+    "@timelab/babel-preset-react-app": "^3.1.2",
     "autoprefixer": "7.1.0",
     "babel-core": "6.24.1",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-loader": "7.0.0",
-    "babel-preset-react-app": "^3.0.0",
     "babel-runtime": "6.23.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",
@@ -44,10 +44,12 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.28.0",
     "jest": "20.0.3",
+    "node-sass": "^4.5.3",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.5",
     "promise": "7.1.1",
+    "sass-loader": "^6.0.5",
     "react-dev-utils": "^3.0.0",
     "react-error-overlay": "^1.0.7",
     "style-loader": "0.17.0",