diff --git a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
index 0662589d4d6a2..46a6a4f450780 100644
--- a/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
+++ b/apps/fabric-website/src/components/CodeBlock/CodeBlock.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./CodeBlock.module.scss');
+import * as stylesImport from './CodeBlock.module.scss';
+const styles: any = stylesImport;
 
 const Highlight = require('react-highlight');
 
diff --git a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
index fef2e515ab0d0..ed7c3d59482b0 100644
--- a/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
+++ b/apps/fabric-website/src/components/ColorTable/ColorTable.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./ColorTable.module.scss');
+import * as stylesImport from './ColorTable.module.scss';
+const styles: any = stylesImport;
 
 export interface IColorTableProps {
   /**
diff --git a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
index 0dc957e1feae2..99853f9423a78 100644
--- a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
+++ b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
-import styles = require('./IconGrid.module.scss');
+import * as stylesImport from './IconGrid.module.scss';
+const styles: any = stylesImport;
 
 export interface IIconGridProps {
   /**
diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index 0a8f94c37165c..b3b9b6990c960 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./Nav.module.scss');
+import * as stylesImport from './Nav.module.scss';
+const styles: any = stylesImport;
 import {
   INavProps,
   INavPage
diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
index 88629a0cbde32..4997bf5d25271 100644
--- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
+++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css, BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./PageHeader.module.scss');
+import * as stylesImport from './PageHeader.module.scss';
+const styles: any = stylesImport;
 import { getPageRouteFromState } from '../../utilities/pageroute';
 import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink';
 
diff --git a/apps/fabric-website/src/components/Table/Table.tsx b/apps/fabric-website/src/components/Table/Table.tsx
index 861cdf40f23b5..be7b5dc7841a2 100644
--- a/apps/fabric-website/src/components/Table/Table.tsx
+++ b/apps/fabric-website/src/components/Table/Table.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AnimationCell } from './AnimationCell/AnimationCell';
-import styles = require('./Table.module.scss');
+import * as stylesImport from './Table.module.scss';
+const styles: any = stylesImport;
 
 export interface ITableProps {
   content: any;
@@ -65,7 +66,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
                   this._renderCell(cell, cellIndex)
                 ))
               }
-              { this.props.isAnimation && <td className={ styles.animCell }><AnimationCell data={ row }/></td> }
+              { this.props.isAnimation && <td className={ styles.animCell }><AnimationCell data={ row } /></td> }
             </tr>
           )) }
         </tbody>
@@ -79,8 +80,8 @@ export class Table extends React.Component<ITableProps, ITableState> {
     return (
       <div>
         { content.data.map((row, rowIndex) => (
-          <table className={ `${styles.tableMobile} ${styles.table} ` + (this.props.isAnimation ? 'docs_animationsTable_body' : '')}
-                 key={ rowIndex }>
+          <table className={ `${styles.tableMobile} ${styles.table} ` + (this.props.isAnimation ? 'docs_animationsTable_body' : '') }
+            key={ rowIndex }>
             <tbody>
               {
                 row.map((cell, cellIndex) => (
@@ -93,7 +94,7 @@ export class Table extends React.Component<ITableProps, ITableState> {
               { this.props.isAnimation &&
                 <tr>
                   <td>Animation</td>
-                  <td><AnimationCell data={ row }/></td>
+                  <td><AnimationCell data={ row } /></td>
                 </tr>
               }
             </tbody>
diff --git a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
index 5ee01a5e9bc9f..741c92068d675 100644
--- a/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
+++ b/apps/fabric-website/src/pages/BlogPage/BlogPage.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { PageHeader } from '../../components/PageHeader/PageHeader';
 import { BlogItem } from './BlogItem';
-import styles = require('./BlogPage.module.scss');
+import * as stylesImport from './BlogPage.module.scss';
+const styles: any = stylesImport;
 
 const blogData = require('json!../../data/blog-posts.json');
 
diff --git a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
index 1aacae67f0a0c..b11d8ce4a25d5 100644
--- a/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
+++ b/apps/fabric-website/src/pages/GetStarted/GetStartedPage.tsx
@@ -4,7 +4,8 @@ import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { PageHeader } from '../../components/PageHeader/PageHeader';
 
 const diagramStyles: any = require('./GetStartedPage.diagram.module.scss');
-import styles = require('./GetStartedPage.module.scss');
+import * as stylesImport from './GetStartedPage.module.scss';
+const styles: any = stylesImport;
 
 export class GetStartedPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/HomePage/HomePage.tsx b/apps/fabric-website/src/pages/HomePage/HomePage.tsx
index c2374bee4a49a..59c14f153bc50 100644
--- a/apps/fabric-website/src/pages/HomePage/HomePage.tsx
+++ b/apps/fabric-website/src/pages/HomePage/HomePage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./HomePage.module.scss');
+import * as stylesImport from './HomePage.module.scss';
+const styles: any = stylesImport;
 
 const packageData = require('json!../../../package.json');
 
diff --git a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
index c1f7a2fd2c5da..9ff7fdbd82683 100644
--- a/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/AngularJSPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./Interstitials.module.scss');
+import * as stylesImport from './Interstitials.module.scss';
+const styles: any = stylesImport;
 
 export class AngularJSPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
index 64f972c925d6a..c5de4b6426b7b 100644
--- a/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/FabricIOSPage.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import styles = require('./Interstitials.module.scss');
+import * as stylesImport from './Interstitials.module.scss';
+const styles: any = stylesImport;
 
 export class FabricIOSPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
index 0e2d1b20a189f..788a69f20044c 100644
--- a/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
+++ b/apps/fabric-website/src/pages/Interstitials/FabricJSPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
-import styles = require('./Interstitials.module.scss');
+import * as stylesImport from './Interstitials.module.scss';
+const styles: any = stylesImport;
 
 export class FabricJSPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
index ac042dac7c464..20cc9086f7ece 100644
--- a/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
+++ b/apps/fabric-website/src/pages/Overviews/ComponentsPage.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { PageHeader } from '../../components/PageHeader/PageHeader';
-import styles = require('./Overviews.module.scss');
+import * as stylesImport from './Overviews.module.scss';
+const styles: any = stylesImport;
 
 export class ComponentsPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
index 657686d06da3b..7f6c87858c733 100644
--- a/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
+++ b/apps/fabric-website/src/pages/Overviews/StylesPage.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { PageHeader } from '../../components/PageHeader/PageHeader';
-import styles = require('./Overviews.module.scss');
+import * as stylesImport from './Overviews.module.scss';
+const styles: any = stylesImport;
 
 export class StylesPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
index f2a8f2792c45b..1fd018ea1247a 100644
--- a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
+++ b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { PageHeader } from '../../components/PageHeader/PageHeader';
-import styles = require('./ResourcesPage.module.scss');
+import * as stylesImport from './ResourcesPage.module.scss';
+const styles: any = stylesImport;
 
 export class ResourcesPage extends React.Component<any, any> {
   public render() {
diff --git a/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx b/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
index 594ed3bacbe65..d3df1c383993f 100644
--- a/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/BrandIconsPage/BrandIconsPage.tsx
@@ -3,7 +3,8 @@ import { CodeBlock } from '../../../components/CodeBlock/CodeBlock';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
 import { Table } from '../../../components/Table/Table';
 import { IconGrid } from '../../../components/IconGrid/IconGrid';
-import styles = require('./BrandIconsPage.module.scss');
+import * as stylesImport from './BrandIconsPage.module.scss';
+const styles: any = stylesImport;
 const pageStyles: any = require('../../PageStyles.module.scss');
 
 const svgResolutionData = require('json!../../../data/brand-icons-svg-resolutions.json');
diff --git a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
index 5d409d9a3e6e2..05cfcab7dcc56 100644
--- a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { ColorTable } from '../../../components/ColorTable/ColorTable';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
 import { Table } from '../../../components/Table/Table';
-import styles = require('./ColorsPage.module.scss');
+import * as stylesImport from './ColorsPage.module.scss';
+const styles: any = stylesImport;
 const pageStyles: any = require('../../PageStyles.module.scss');
 import { baseURL } from '../../../appConfig';
 
diff --git a/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx b/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
index 3d32ae2f3f8c1..44c3547e8db04 100644
--- a/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/LayoutPage/LayoutPage.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { CodeBlock } from '../../../components/CodeBlock/CodeBlock';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
 import { Table } from '../../../components/Table/Table';
-import styles = require('./LayoutPage.module.scss');
+import * as stylesImport from './LayoutPage.module.scss';
+const styles: any = stylesImport;
 const pageStyles: any = require('../../PageStyles.module.scss');
 
 const visibilityData = require('json!../../../data/layout-visibility.json');
diff --git a/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx b/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
index 0951f8238142d..ebd5736b3a17a 100644
--- a/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/LocalizationPage/LocalizationPage.tsx
@@ -3,7 +3,8 @@ import { CodeBlock } from '../../../components/CodeBlock/CodeBlock';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
 import { Table } from '../../../components/Table/Table';
 const pageStyles: any = require('../../PageStyles.module.scss');
-import styles = require('./LocalizationPage.module.scss');
+import * as stylesImport from './LocalizationPage.module.scss';
+const styles: any = stylesImport;
 
 const directionalIconsData = require('json!../../../data/directional-icons.json');
 const localizedFontsData = require('json!../../../data/localized-fonts.json');
diff --git a/apps/todo-app/src/components/Todo.tsx b/apps/todo-app/src/components/Todo.tsx
index 2f6fc3441ac59..af55e278f4aad 100644
--- a/apps/todo-app/src/components/Todo.tsx
+++ b/apps/todo-app/src/components/Todo.tsx
@@ -6,7 +6,8 @@ import { ITodoProps, ITodoState, ITodoItem, ITodoItemProps } from '../types/inde
 import TodoForm from './TodoForm';
 import TodoTabs from './TodoTabs';
 
-import styles = require('./Todo.module.scss');
+import * as stylesImport from './Todo.module.scss';
+const styles: any = stylesImport;
 import strings from '../strings';
 
 /**
diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx
index cbc63caf50940..86554e1065c9d 100644
--- a/apps/todo-app/src/components/TodoForm.tsx
+++ b/apps/todo-app/src/components/TodoForm.tsx
@@ -3,7 +3,8 @@ import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { ITodoFormProps, ITodoFormState } from '../types/index';
-import styles = require('./Todo.module.scss');
+import * as stylesImport from './Todo.module.scss';
+const styles: any = stylesImport;
 import strings from './../strings';
 
 /**
diff --git a/apps/todo-app/src/components/TodoItem.tsx b/apps/todo-app/src/components/TodoItem.tsx
index e11f2bb73a75c..19c1fa072f6cc 100644
--- a/apps/todo-app/src/components/TodoItem.tsx
+++ b/apps/todo-app/src/components/TodoItem.tsx
@@ -6,7 +6,8 @@ import { DocumentCardActivity } from 'office-ui-fabric-react/lib/DocumentCard';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { ITodoItem, ITodoItemProps } from '../types/index';
 
-import styles = require('./Todo.module.scss');
+import * as stylesImport from './Todo.module.scss';
+const styles: any = stylesImport;
 import strings from './../strings';
 
 /**
diff --git a/apps/todo-app/src/components/TodoTabs.tsx b/apps/todo-app/src/components/TodoTabs.tsx
index 7f65db2511480..ee60406511adc 100644
--- a/apps/todo-app/src/components/TodoTabs.tsx
+++ b/apps/todo-app/src/components/TodoTabs.tsx
@@ -11,7 +11,8 @@ import { KeyCodes } from 'office-ui-fabric-react/lib/Utilities';
 import TodoItem from './TodoItem';
 import { ITodoItem, ITodoItemProps, ITodoTabsProps } from '../types/index';
 
-import styles = require('./Todo.module.scss');
+import * as stylesImport from './Todo.module.scss';
+const styles: any = stylesImport;
 import strings from './../strings';
 
 /**
@@ -61,12 +62,12 @@ export default class TodoTabs extends React.Component<ITodoTabsProps, {}> {
         <FocusZone
           direction={ FocusZoneDirection.vertical }
           isInnerZoneKeystroke={ ev => ev.which === KeyCodes.right }
-          >
+        >
           <List
             className={ styles.todoList }
             items={ tasks }
             onRenderCell={ this._onRenderTodoItem }
-            />
+          />
         </FocusZone>
       </PivotItem>
     );
@@ -79,7 +80,7 @@ export default class TodoTabs extends React.Component<ITodoTabsProps, {}> {
         item={ item }
         onToggleComplete={ this.props.onToggleComplete }
         onDeleteItem={ this.props.onDeleteItem }
-        />
+      />
     );
   }
 }
diff --git a/packages/example-component/src/ExampleComponent.tsx b/packages/example-component/src/ExampleComponent.tsx
index b22079205aa38..9dbd859c5a1c8 100644
--- a/packages/example-component/src/ExampleComponent.tsx
+++ b/packages/example-component/src/ExampleComponent.tsx
@@ -17,7 +17,8 @@ import {
 import { IExampleComponentProps } from './ExampleComponent.Props';
 
 /* tslint:disable:no-any */
-import styles = require('./ExampleComponent.scss');
+import * as stylesImport from './ExampleComponent.scss';
+const styles: any = stylesImport;
 /* tslint:enable:no-any */
 
 /**
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
index c28981faceb28..be228cafbeb8e 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -12,7 +12,8 @@ import { Link } from '../../Link';
 import { IBreadcrumbProps, IBreadcrumbItem } from './Breadcrumb.Props';
 import { DirectionalHint } from '../../common/DirectionalHint';
 
-import styles = require('./Breadcrumb.scss');
+import * as stylesImport from './Breadcrumb.scss';
+const styles: any = stylesImport;
 
 export interface IBreadcrumbState {
   isOverflowOpen: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index a17323220741a..7c6f239a6b4d5 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -14,7 +14,8 @@ import { Icon, IIconProps } from '../../Icon';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
 import { IButtonProps, IButton } from './Button.Props';
-import styles = require('./BaseButton.scss');
+import * as stylesImport from './BaseButton.scss';
+const styles: any = stylesImport;
 
 export interface IButtonClassNames {
   base?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
index 8570b372c56dc..1005effb8c4f0 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CommandButton/CommandButton.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseButton, IButtonClassNames } from '../BaseButton';
 import { BaseComponent, nullRender } from '../../../Utilities';
 import { IButtonProps } from '../Button.Props';
-import styles = require('./CommandButton.scss');
+import * as stylesImport from './CommandButton.scss';
+const styles: any = stylesImport;
 
 const CLASS_NAMES: IButtonClassNames = {
   base: 'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
index a8686bb04f052..075dc72724f14 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
@@ -3,7 +3,8 @@ import { BaseButton, IButtonClassNames } from '../BaseButton';
 import { BaseComponent } from '../../../Utilities';
 import { IButtonProps } from '../Button.Props';
 
-import styles = require('./CompoundButton.scss');
+import * as stylesImport from './CompoundButton.scss';
+const styles: any = stylesImport;
 
 const CLASS_NAMES: IButtonClassNames = {
   base: 'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
index 97110725fbb76..77fe61b844664 100644
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -3,7 +3,8 @@ import { BaseButton, IButtonClassNames } from '../BaseButton';
 import { BaseComponent, nullRender } from '../../../Utilities';
 import { IButtonProps } from '../Button.Props';
 
-import styles = require('./DefaultButton.scss');
+import * as stylesImport from './DefaultButton.scss';
+const styles: any = stylesImport;
 
 export const CLASS_NAMES: IButtonClassNames = {
   base: 'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
index 6b7a71b0b138a..ee7023b6a8b4b 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseButton, IButtonClassNames } from '../BaseButton';
 import { BaseComponent, nullRender } from '../../../Utilities';
 import { IButtonProps } from '../Button.Props';
-import styles = require('./IconButton.scss');
+import * as stylesImport from './IconButton.scss';
+const styles: any = stylesImport;
 
 const CLASS_NAMES: IButtonClassNames = {
   base: 'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
index a413deae1a66e..b7aec025a670b 100644
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -3,7 +3,8 @@ import { BaseComponent, nullRender } from '../../../Utilities';
 import { BaseButton, IButtonClassNames } from '../BaseButton';
 import { IButtonProps } from '../Button.Props';
 
-import styles = require('./PrimaryButton.scss');
+import * as stylesImport from './PrimaryButton.scss';
+const styles: any = stylesImport;
 
 const CLASS_NAMES: IButtonClassNames = {
   base: 'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index 9db76a5f4148c..a6e2ded862f10 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -9,7 +9,8 @@ import {
   BaseComponent,
   KeyCodes
 } from '../../Utilities';
-import styles = require('./Calendar.scss');
+import * as stylesImport from './Calendar.scss';
+const styles: any = stylesImport;
 
 export interface ICalendarState {
   /** The currently focused date in the calendar, but not necessarily selected */
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index 23b4cefda2290..65fc925b89533 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -22,7 +22,8 @@ import {
   isInDateRangeArray
 } from '../../utilities/dateMath/DateMath';
 
-import styles = require('./Calendar.scss');
+import * as stylesImport from './Calendar.scss';
+const styles: any = stylesImport;
 
 const DAYS_IN_WEEK = 7;
 
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 98b1ccfb0ba65..5f49b27f6f46d 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -8,7 +8,8 @@ import {
 import { ICalendarStrings } from './Calendar.Props';
 import { FocusZone } from '../../FocusZone';
 import { addYears, setMonth } from '../../utilities/dateMath/DateMath';
-import styles = require('./Calendar.scss');
+import * as stylesImport from './Calendar.scss';
+const styles: any = stylesImport;
 
 export interface ICalendarMonthProps {
   navigatedDate: Date;
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index bbeef4834b6c9..1e22c152180c3 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -16,7 +16,8 @@ import {
 } from '../../Utilities';
 import { getRelativePositions, IPositionInfo, IPositionProps, getMaxHeight } from '../../utilities/positioning';
 import { Popup } from '../../Popup';
-import styles = require('./Callout.scss');
+import * as stylesImport from './Callout.scss';
+const styles: any = stylesImport;
 
 const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
 const OFF_SCREEN_STYLE = { opacity: 0 };
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
index ac052e90531ba..f14c644539e90 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
-import styles = require('./Check.scss');
+import * as stylesImport from './Check.scss';
+const styles: any = stylesImport;
 
 export interface ICheckProps extends React.Props<Check> {
   /**
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
index 922bc080ea9dd..a03c435a1db94 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
@@ -9,7 +9,8 @@ import {
   ICheckbox,
   ICheckboxProps
 } from './Checkbox.Props';
-import styles = require('./Checkbox.scss');
+import * as stylesImport from './Checkbox.scss';
+const styles: any = stylesImport;
 
 export interface ICheckboxState {
   /** Is true when the control has focus. */
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
index 6c7b454c611cd..2f9eb578c89fe 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -8,7 +8,8 @@ import {
   getId,
   BaseComponent
 } from '../../Utilities';
-import styles = require('./ChoiceGroup.scss');
+import * as stylesImport from './ChoiceGroup.scss';
+const styles: any = stylesImport;
 
 export interface IChoiceGroupState {
   keyChecked: string | number;
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
index 9d1fc9a5253ad..6d290b6ea438c 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
@@ -17,7 +17,8 @@ import {
   updateH,
   updateSV
 } from '../../utilities/color/colors';
-import styles = require('./ColorPicker.scss');
+import * as stylesImport from './ColorPicker.scss';
+const styles: any = stylesImport;
 
 export interface IColorPickerState {
   isOpen: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
index 6d408132160b9..2758179179a3e 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
@@ -12,7 +12,8 @@ import {
   getFullColorString,
   hsv2hex
 } from '../../utilities/color/colors';
-import styles = require('./ColorPicker.scss');
+import * as stylesImport from './ColorPicker.scss';
+const styles: any = stylesImport;
 
 export interface IColorRectangleProps {
   color: IColor;
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
index 4b2b853d7187b..60a68a061bb0a 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
@@ -4,7 +4,8 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import styles = require('./ColorPicker.scss');
+import * as stylesImport from './ColorPicker.scss';
+const styles: any = stylesImport;
 
 export interface IColorSliderProps {
   minValue?: number;
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index 66504e08c31db..e44ea9f2351f5 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -18,7 +18,8 @@ import {
   IconName,
   IIconProps
 } from '../../Icon';
-import styles = require('./CommandBar.scss');
+import * as stylesImport from './CommandBar.scss';
+const styles: any = stylesImport;
 
 const OVERFLOW_KEY = 'overflow';
 const OVERFLOW_WIDTH = 41.5;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index db96ccc56612a..79da814941c3c 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -21,7 +21,8 @@ import {
   Icon,
   IIconProps
 } from '../../Icon';
-import styles = require('./ContextualMenu.scss');
+import * as stylesImport from './ContextualMenu.scss';
+const styles: any = stylesImport;
 
 export interface IContextualMenuState {
   expandedMenuItemKey?: string;
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index b66acd7b1ae9b..429604cc19619 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -17,7 +17,8 @@ import {
   css
 } from '../../Utilities';
 import { compareDates } from '../../utilities/dateMath/DateMath';
-import styles = require('./DatePicker.scss');
+import * as stylesImport from './DatePicker.scss';
+const styles: any = stylesImport;
 
 export interface IDatePickerState {
   /** The currently focused date in the drop down, but not necessarily selected */
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index de4a381ee15ac..d1774e2e51d9d 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -12,7 +12,8 @@ import { Icon } from '../../Icon';
 import { Layer } from '../../Layer';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
-import styles = require('./DetailsHeader.scss');
+import * as stylesImport from './DetailsHeader.scss';
+const styles: any = stylesImport;
 
 const MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button
 const MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index 6cc2c9a58bd45..62d0d1160c8a5 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -30,7 +30,8 @@ import {
   SelectionZone
 } from '../../utilities/selection/index';
 import { DragDropHelper } from '../../utilities/dragdrop/DragDropHelper';
-import styles = require('./DetailsList.scss');
+import * as stylesImport from './DetailsList.scss';
+const styles: any = stylesImport;
 
 export interface IDetailsListState {
   lastWidth?: number;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index e9f8f83c8a8ce..36c4f67883128 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -18,7 +18,8 @@ import {
   IDragDropOptions,
 } from './../../utilities/dragdrop/interfaces';
 import { IViewport } from '../../utilities/decorators/withViewport';
-import styles = require('./DetailsRow.scss');
+import * as stylesImport from './DetailsRow.scss';
+const styles: any = stylesImport;
 
 export interface IDetailsRowProps extends React.Props<DetailsRow> {
   item: any;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 40a9771a66ace..a420719cedbeb 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 /* tslint:enable:no-unused-variable */
 import { css } from '../../Utilities';
 import { Check } from '../../Check';
-import styles = require('./DetailsRow.scss');
+import * as stylesImport from './DetailsRow.scss';
+const styles: any = stylesImport;
 
 export interface IDetailsRowCheckProps {
   selected?: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index 07398051716ed..083c88f68c9ae 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IColumn } from './DetailsList.Props';
 import { BaseComponent, css } from '../../Utilities';
-import styles = require('./DetailsRow.scss');
+import * as stylesImport from './DetailsRow.scss';
+const styles: any = stylesImport;
 
 export interface IDetailsRowFieldsProps {
   item: any;
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
index 060d2a3478fbc..3f05b42fcbbc4 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
@@ -9,7 +9,8 @@ import { Modal } from '../../Modal';
 import { IconButton } from '../../Button';
 import { DialogFooter } from './DialogFooter';
 import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import styles = require('./Dialog.scss');
+import * as stylesImport from './Dialog.scss';
+const styles: any = stylesImport;
 
 export interface IDialogState {
   id?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
index 1ecb1d720285e..21a8a03a4f545 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
-import styles = require('./Dialog.scss');
+import * as stylesImport from './Dialog.scss';
+const styles: any = stylesImport;
 
 export class DialogFooter extends BaseComponent<any, any> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
index 22fcc97b85d38..d25954e1d2006 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
@@ -6,7 +6,8 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
   public static defaultProps: IDocumentCardProps = {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
index 4eaebabcbf1f4..0526b35239bb4 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardActionsProps } from './DocumentCard.Props';
 import { IconButton } from '../../Button';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 export class DocumentCardActions extends BaseComponent<IDocumentCardActionsProps, any> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
index e4ca71c955ba1..e24974c16d14c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardActivityProps, IDocumentCardActivityPerson } from './DocumentCard.Props';
 import { Persona, PersonaSize } from '../../Persona';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityProps, any> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
index 56ac68eb4ca9e..159c0a7a185f0 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
 import { IDocumentCardLocationProps } from './DocumentCard.Props';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 export class DocumentCardLocation extends BaseComponent<IDocumentCardLocationProps, any> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index abb81ac983a74..cc40147dc45b5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -6,7 +6,8 @@ import {
   autobind,
   css
 } from '../../Utilities';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 const LIST_ITEM_COUNT = 3;
 
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index dfa5e89c1abed..e44cc29c8c73c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -8,7 +8,8 @@ import {
   css
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.Props';
-import styles = require('./DocumentCard.scss');
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
 
 export interface IDocumentCardTitleState {
   truncatedTitleFirstPiece?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
index e09f78dc6a3f4..10e6fee25dc4d 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
@@ -16,7 +16,8 @@ import {
   findIndex,
   getId
 } from '../../Utilities';
-import styles = require('./Dropdown.scss');
+import * as stylesImport from './Dropdown.scss';
+const styles: any = stylesImport;
 
 // Internal only props iterface to support mixing in responsive mode
 export interface IDropdownInternalProps extends IDropdownProps, IWithResponsiveModeState {
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index 708c438cbfd30..5a5b770e7cf06 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -23,7 +23,8 @@ import {
   Persona,
   PersonaSize
 } from '../../Persona';
-import styles = require('./Facepile.scss');
+import * as stylesImport from './Facepile.scss';
+const styles: any = stylesImport;
 
 export class Facepile extends BaseComponent<IFacepileProps, {}> {
   public static defaultProps: IFacepileProps = {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
index 55b964b1ed5a4..3314b55980982 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
@@ -7,7 +7,8 @@ import {
 import { Link } from '../../Link';
 import { IGroupDividerProps } from './GroupedList.Props';
 import { GroupSpacer } from './GroupSpacer';
-import styles = require('./GroupFooter.scss');
+import * as stylesImport from './GroupFooter.scss';
+const styles: any = stylesImport;
 
 export class GroupFooter extends BaseComponent<IGroupDividerProps, {}> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
index 4257ed2294104..b41d169a4943c 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -11,7 +11,8 @@ import { Icon } from '../../Icon';
 import { GroupSpacer } from './GroupSpacer';
 import { Spinner } from '../../Spinner';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import styles = require('./GroupHeader.scss');
+import * as stylesImport from './GroupHeader.scss';
+const styles: any = stylesImport;
 
 export interface IGroupHeaderState {
   isCollapsed: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
index 5f63f8af05dfb..8f9e61fef19c2 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupSpacer.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
 import {
   css
 } from '../../Utilities';
-import styles = require('./GroupSpacer.scss');
+import * as stylesImport from './GroupSpacer.scss';
+const styles: any = stylesImport;
 
 export interface IGroupSpacerProps {
   count: number;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
index 12844f3927dce..5adc6bedc4c7b 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
@@ -19,7 +19,8 @@ import {
 import {
   SelectionMode
 } from '../../utilities/selection/index';
-import styles = require('./GroupedList.scss');
+import * as stylesImport from './GroupedList.scss';
+const styles: any = stylesImport;
 
 export interface IGroupedListState {
   lastWidth?: number;
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
index c93b10ba54ced..6bb1507475f6a 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
@@ -34,7 +34,8 @@ import {
 } from './../../utilities/dragdrop/interfaces';
 import { assign, css } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
-import styles = require('./GroupedList.scss');
+import * as stylesImport from './GroupedList.scss';
+const styles: any = stylesImport;
 
 export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
   /** Map of callback functions related to drag and drop functionality. */
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
index 7a89d6903d9d4..ecfe0d8f811c4 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
@@ -10,7 +10,8 @@ import {
 } from '../../Utilities';
 import { IImageProps, ImageFit, ImageLoadState } from './Image.Props';
 
-import styles = require('./Image.scss');
+import * as stylesImport from './Image.scss';
+const styles: any = stylesImport;
 
 export interface IImageState {
   loadState?: ImageLoadState;
@@ -77,7 +78,7 @@ export class Image extends BaseComponent<IImageProps, IImageState> {
 
   public render() {
     let imageProps = getNativeProps(this.props, imageProperties, ['width', 'height']);
-    let { src, alt, width, height, shouldFadeIn, className, imageFit, role, maximizeFrame} = this.props;
+    let { src, alt, width, height, shouldFadeIn, className, imageFit, role, maximizeFrame } = this.props;
     let { loadState } = this.state;
     let coverStyle = this._coverStyle;
     let loaded = loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && this.props.shouldStartVisible);
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.tsx
index 2ee304beb5b03..2ef509078354b 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { BaseComponent, css, divProperties, getNativeProps } from '../../Utilities';
 import { ILabelProps } from './Label.Props';
-import styles = require('./Label.scss');
+import * as stylesImport from './Label.scss';
+const styles: any = stylesImport;
 
 export class Label extends BaseComponent<ILabelProps, any> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
index 14390df2638a3..6d6c99b6660ac 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
@@ -6,7 +6,8 @@ import * as ReactDOM from 'react-dom';
 import { Fabric } from '../../Fabric';
 import { ILayerProps } from './Layer.Props';
 import { css, BaseComponent, getDocument, setVirtualParent } from '../../Utilities';
-import styles = require('./Layer.scss');
+import * as stylesImport from './Layer.scss';
+const styles: any = stylesImport;
 
 let _layersByHostId: { [hostId: string]: Layer[] } = {};
 
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
index 2a7dce529f670..ade1c28b08e25 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
@@ -8,7 +8,8 @@ import {
   getNativeProps
 } from '../../Utilities';
 import { ILink, ILinkProps } from './Link.Props';
-import styles = require('./Link.scss');
+import * as stylesImport from './Link.scss';
+const styles: any = stylesImport;
 
 interface IMyScreen extends Screen {
   left: number;
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
index 04fdc618f4e54..92c5c9b16406a 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -11,7 +11,8 @@ import {
   getRTL
 } from '../../Utilities';
 import { IMarqueeSelectionProps } from './MarqueeSelection.Props';
-import styles = require('./MarqueeSelection.scss');
+import * as stylesImport from './MarqueeSelection.scss';
+const styles: any = stylesImport;
 
 export interface IMarqueeSelectionState {
   dragOrigin?: IPoint;
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
index 9bc8a80e74b6a..15b8b242153d1 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
@@ -7,7 +7,8 @@ import {
 } from '../../Utilities';
 import { IconButton } from '../../Button';
 import { IMessageBarProps, MessageBarType } from './MessageBar.Props';
-import styles = require('./MessageBar.scss');
+import * as stylesImport from './MessageBar.scss';
+const styles: any = stylesImport;
 
 export interface IMessageBarState {
   labelId?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx b/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
index 04506edb20037..393980aded3dc 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
+++ b/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
@@ -10,7 +10,8 @@ import { Overlay } from '../../Overlay';
 import { Layer } from '../../Layer';
 import { Popup } from '../Popup/index';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import styles = require('./Modal.scss');
+import * as stylesImport from './Modal.scss';
+const styles: any = stylesImport;
 
 // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)
 
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
index 2638d83bb1f11..06a20e097e3e8 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
@@ -6,7 +6,8 @@ import {
 } from '../../Utilities';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { CommandButton } from '../../Button';
-import styles = require('./Nav.scss');
+import * as stylesImport from './Nav.scss';
+const styles: any = stylesImport;
 
 import {
   INav,
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
index fff54ce1e3399..ae13e65e20bfe 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
@@ -9,7 +9,8 @@ import {
 } from '../../Utilities';
 import { IOverlayProps } from './Overlay.Props';
 
-import styles = require('./Overlay.scss');
+import * as stylesImport from './Overlay.scss';
+const styles: any = stylesImport;
 
 export class Overlay extends BaseComponent<IOverlayProps, {}> {
 
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index 0cc6c915407e1..7639093ad3adb 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -15,7 +15,8 @@ import { Layer } from '../Layer/Layer';
 import { Overlay } from '../../Overlay';
 import { Popup } from '../../Popup';
 import { IconButton } from '../../Button';
-import styles = require('./Panel.scss');
+import * as stylesImport from './Panel.scss';
+const styles: any = stylesImport;
 
 export interface IPanelState {
   isFooterSticky?: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
index cee8055ecf411..2ace343e5f64a 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
@@ -5,7 +5,8 @@ import { Persona } from './Persona';
 import { PersonaInitialsColor } from './Persona.Props';
 import { shallow } from 'enzyme';
 import * as chai from 'chai';
-import styles = require('./Persona.scss');
+import * as stylesImport from './Persona.scss';
+const styles: any = stylesImport;
 
 const { expect } = chai;
 
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
index 3fd640b991669..dfbfb7ea99946 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
@@ -21,7 +21,8 @@ import {
   PERSONA_PRESENCE,
   PERSONA_SIZE
 } from './PersonaConsts';
-import styles = require('./Persona.scss');
+import * as stylesImport from './Persona.scss';
+const styles: any = stylesImport;
 
 // The RGB color swatches
 const COLOR_SWATCHES_LOOKUP: PersonaInitialsColor[] = [
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
index fd094b9df2aee..c797258be7950 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
@@ -3,7 +3,8 @@ import {
   PersonaPresence,
   PersonaSize
 } from './Persona.Props';
-import styles = require('./Persona.scss');
+import * as stylesImport from './Persona.scss';
+const styles: any = stylesImport;
 
 export const PERSONA_SIZE = {
   [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsTiny,
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
index 4e8ab532593d9..497eee7845026 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -13,7 +13,8 @@ import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 import { PivotItem } from './PivotItem';
 import { PivotLinkFormat } from './Pivot.Props';
 import { PivotLinkSize } from './Pivot.Props';
-import styles = require('./Pivot.scss');
+import * as stylesImport from './Pivot.scss';
+const styles: any = stylesImport;
 
 /**
  *  Usage:
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
index 13451050136c6..6c5d3b9b414d1 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
@@ -7,7 +7,8 @@ import {
   css
 } from '../../Utilities';
 import { IProgressIndicatorProps } from './ProgressIndicator.Props';
-import styles = require('./ProgressIndicator.scss');
+import * as stylesImport from './ProgressIndicator.scss';
+const styles: any = stylesImport;
 
 // if the percentComplete is near 0, don't animate it.
 // This prevents animations on reset to 0 scenarios
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
index 2b3aaa7ff9e38..db2e20f6175e3 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
@@ -5,7 +5,8 @@ import {
   getId
 } from '../../Utilities';
 import { IRatingProps, RatingSize } from './Rating.Props';
-import styles = require('./Rating.scss');
+import * as stylesImport from './Rating.scss';
+const styles: any = stylesImport;
 
 export interface IRatingState {
   rating: number;
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index ed602dcc57945..4cfd691d11590 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -11,7 +11,8 @@ import {
 } from '../../Utilities';
 
 import { Icon } from '../../Icon';
-import styles = require('./SearchBox.scss');
+import * as stylesImport from './SearchBox.scss';
+const styles: any = stylesImport;
 
 export interface ISearchBoxState {
   value?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
index cad2279f83944..b5feb1d08f273 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
@@ -10,7 +10,8 @@ import {
 } from '../../Utilities';
 import { ISliderProps, ISlider } from './Slider.Props';
 import { Label } from '../../Label';
-import styles = require('./Slider.scss');
+import * as stylesImport from './Slider.scss';
+const styles: any = stylesImport;
 
 export interface ISliderState {
   value?: number;
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
index 6b167883ca8ef..87c807ecb671a 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { BaseComponent, css } from '../../Utilities';
 import { ISpinnerProps, SpinnerType, SpinnerSize } from './Spinner.Props';
-import styles = require('./Spinner.scss');
+import * as stylesImport from './Spinner.scss';
+const styles: any = stylesImport;
 
 export class Spinner extends BaseComponent<ISpinnerProps, any> {
   public static defaultProps: ISpinnerProps = {
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 27a54c1fbf09b..f5e9608056aa0 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -6,7 +6,8 @@ import { TeachingBubbleContent } from './TeachingBubbleContent';
 import { ITeachingBubbleProps } from './TeachingBubble.Props';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import styles = require('./TeachingBubble.scss');
+import * as stylesImport from './TeachingBubble.scss';
+const styles: any = stylesImport;
 
 export interface ITeachingBubbleState {
   isTeachingBubbleVisible?: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
index 6b263eca6d339..0c8ede6f0775b 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -10,7 +10,8 @@ import { ITeachingBubbleProps } from './TeachingBubble.Props';
 import { ITeachingBubbleState } from './TeachingBubble';
 import { PrimaryButton, DefaultButton, IconButton } from '../../Button';
 import { Image, ImageFit } from '../../Image';
-import styles = require('./TeachingBubble.scss');
+import * as stylesImport from './TeachingBubble.scss';
+const styles: any = stylesImport;
 
 export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, ITeachingBubbleState> {
 
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index af302c9f588b9..5de0b8176e804 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -10,7 +10,8 @@ import {
   inputProperties,
   textAreaProperties
 } from '../../Utilities';
-import styles = require('./TextField.scss');
+import * as stylesImport from './TextField.scss';
+const styles: any = stylesImport;
 
 export interface ITextFieldState {
   value?: string;
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
index a4be847617b77..a5e5c6d49acc5 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
@@ -9,7 +9,8 @@ import {
 } from '../../Utilities';
 import { IToggleProps, IToggle } from './Toggle.Props';
 import { Label } from '../../Label';
-import styles = require('./Toggle.scss');
+import * as stylesImport from './Toggle.scss';
+const styles: any = stylesImport;
 
 export interface IToggleState {
   isChecked: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
index 4b8ef22255a33..2dd3965cf7a1f 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.tsx
@@ -10,7 +10,8 @@ import {
 import { ITooltipProps, TooltipDelay } from './Tooltip.Props';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import styles = require('./Tooltip.scss');
+import * as stylesImport from './Tooltip.scss';
+const styles: any = stylesImport;
 
 export class Tooltip extends BaseComponent<ITooltipProps, any> {
 
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
index 5126f004489eb..6fd94f080ff71 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -12,7 +12,8 @@ import {
 import { ITooltipHostProps } from './TooltipHost.Props';
 import { Tooltip } from './Tooltip';
 import { TooltipDelay } from './Tooltip.Props';
-import styles = require('./Tooltip.scss');
+import * as stylesImport from './Tooltip.scss';
+const styles: any = stylesImport;
 
 export interface ITooltipHostState {
   isTooltipVisible?: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
index f720942d19682..b6ee218dc9f61 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -15,7 +15,8 @@ import { SuggestionsController } from './Suggestions/SuggestionsController';
 import { IBasePickerProps } from './BasePicker.Props';
 import { BaseAutoFill } from './AutoFill/BaseAutoFill';
 import { IPickerItemProps } from './PickerItem.Props';
-import styles = require('./BasePicker.scss');
+import * as stylesImport from './BasePicker.scss';
+const styles: any = stylesImport;
 
 export interface IBasePickerState {
   items?: any;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
index 63e7caa32a1c5..af8ed7a742966 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
@@ -5,7 +5,8 @@ import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, PersonaPresence } from '../../../../Persona';
 import { IPeoplePickerItemProps } from './PeoplePickerItem.Props';
 import { IconButton } from '../../../../Button';
-import styles = require('./PickerItemsDefault.scss');
+import * as stylesImport from './PickerItemsDefault.scss';
+const styles: any = stylesImport;
 
 export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element = (peoplePickerItemProps: IPeoplePickerItemProps) => {
   let {
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
index 3c94bbbccd16b..a8df44051be09 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
@@ -7,7 +7,8 @@ import { Persona, PersonaPresence } from '../../../../Persona';
 import { ContextualMenu, DirectionalHint } from '../../../../ContextualMenu';
 import { IconButton } from '../../../../Button';
 import { FocusZone } from '../../../../FocusZone';
-import styles = require('./PickerItemsDefault.scss');
+import * as stylesImport from './PickerItemsDefault.scss';
+const styles: any = stylesImport;
 
 export interface IPeoplePickerItemState {
   contextualMenuVisible: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
index 34a9ae9594f9e..072357a5b062e 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SuggestionItemDefault.tsx
@@ -3,7 +3,8 @@ import * as React from 'react';
 /* tslint:enable */
 import { css } from '../../../../Utilities';
 import { Persona, PersonaSize, IPersonaProps, PersonaPresence } from '../../../../Persona';
-import styles = require('../PeoplePicker.scss');
+import * as stylesImport from '../PeoplePicker.scss';
+const styles: any = stylesImport;
 
 export const SuggestionItemNormal: (persona: IPersonaProps) => JSX.Element = (personaProps: IPersonaProps) => {
   return (
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
index 3587455babc3b..e50b0672cc0ed 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
@@ -6,7 +6,8 @@ import {
 import { CommandButton, IButton } from '../../../Button';
 import { Spinner } from '../../../Spinner';
 import { ISuggestionItemProps, ISuggestionsProps } from './Suggestions.Props';
-import styles = require('./Suggestions.scss');
+import * as stylesImport from './Suggestions.scss';
+const styles: any = stylesImport;
 
 export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {}> {
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
index 7d9a120d5df4c..69ca9cde022d6 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagItem.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
 import { css } from '../../../Utilities';
 import { IPickerItemProps } from '../PickerItem.Props';
 import { ITag } from './TagPicker';
-import styles = require('./TagItem.scss');
+import * as stylesImport from './TagItem.scss';
+const styles: any = stylesImport;
 
 export const TagItem = (props: IPickerItemProps<ITag>) => (
   <div
diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
index 28535ee3effb6..0534e1ab675c3 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx
@@ -8,7 +8,8 @@ import {
 import { BasePicker } from '../BasePicker';
 import { IBasePickerProps } from '../BasePicker.Props';
 import { TagItem } from './TagItem';
-import styles = require('./TagItem.scss');
+import * as stylesImport from './TagItem.scss';
+const styles: any = stylesImport;
 
 export interface ITag {
   key: string;
diff --git a/packages/office-ui-fabric-react/webpack.serve.config.js b/packages/office-ui-fabric-react/webpack.serve.config.js
index 2fd8036164915..313b1449ba033 100644
--- a/packages/office-ui-fabric-react/webpack.serve.config.js
+++ b/packages/office-ui-fabric-react/webpack.serve.config.js
@@ -35,14 +35,16 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.tsx?$/,
+        test: [/\.tsx?$/],
         loader: 'ts-loader',
         exclude: [
-          /node_modules/
+          /node_modules/,
+          /\.scss.ts$/
         ]
       },
       {
         test: /\.scss$/,
+        enforce: 'pre',
         exclude: [
           /node_modules/
         ],
@@ -61,6 +63,7 @@ module.exports = {
           },
           {
             loader: 'postcss-loader',
+
             options: {
               plugins: function () {
                 return [