npm start now works when adding/removing classes.

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');
 

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 {
   /**

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 {
   /**

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

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';
 

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>

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');
 

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() {

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');
 

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() {

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() {

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() {

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() {

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() {

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() {

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');

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';
 

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');

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');

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';
 
 /**

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';
 
 /**

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';
 
 /**

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 }
-        />
+      />
     );
   }
 }

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 */
 
 /**

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;

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;

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',

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',

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',

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',

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',

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 */

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;
 

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;

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 };