diff --git a/template/images.d.ts b/template/shims/images.d.ts
similarity index 69%
rename from template/images.d.ts
rename to template/shims/images.d.ts
index 04c45b068..3f287eaa6 100644
--- a/template/images.d.ts
+++ b/template/shims/images.d.ts
@@ -5,6 +5,3 @@ declare module '*.jpeg'
 declare module '*.gif'
 declare module '*.bmp'
 declare module '*.tiff'
-declare module '*.css'
-declare module '*.scss'
-declare module '*.sass'
diff --git a/template/shims/styles.d.ts b/template/shims/styles.d.ts
new file mode 100644
index 000000000..cf6b60bd4
--- /dev/null
+++ b/template/shims/styles.d.ts
@@ -0,0 +1,16 @@
+
+declare module '*.module.css' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.module.scss' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.module.sass' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.css'
+declare module '*.scss'
+declare module '*.sass'
diff --git a/template/src/App.css b/template/src/App.module.css
similarity index 87%
rename from template/src/App.css
rename to template/src/App.module.css
index 7f39295fc..5b5b28321 100644
--- a/template/src/App.css
+++ b/template/src/App.module.css
@@ -1,13 +1,13 @@
-:local .app {
+.app {
   text-align: center;
 }
 
-:local .logo {
+.logo {
   animation: logo-spin infinite 20s linear;
   height: 40vmin;
 }
 
-:local .header {
+.header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -18,7 +18,7 @@
   color: white;
 }
 
-:local .link {
+.link {
   color: #61dafb;
 }
 
diff --git a/template/src/App.tsx b/template/src/App.tsx
index 10acbb5da..26d1f5fe8 100644
--- a/template/src/App.tsx
+++ b/template/src/App.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as styles from './App.css';
+import * as styles from './App.module.css';
 import logo from './logo.svg';
 
 class App extends React.Component {