DOCINFRA-2341_merged_using_automation

ej2-react-toc.html

@@ -869,7 +869,7 @@
 </li>
 <li>Collaborative Editing
           <ul>
-             <li><a href="/ej2-react/document-editor/collaborative-editing/using-dot-net">Using ASP.NET</a></li>
+             <li><a href="/ej2-react/document-editor/collaborative-editing/using-dot-net">Using ASP.NET Core</a></li>
              <li><a href="/ej2-react/document-editor/collaborative-editing/using-java">Using Java</a></li>  
         </ul>
 </li>
@@ -1953,6 +1953,14 @@
 <li><a href="/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table">Convert complex JSON to flat JSON and assign it to the pivot table</a></li>
 <li><a href="/ej2-react/pivotview/how-to/load-pre-defined-report-in-initial-rendering">Load desired report from the report list as default</a></li>
 <li><a href="/ej2-react/pivotview/how-to/display-value-in-hrs-min-sec-format">Display string value to pivot table values</a></li>
+<li><a href="/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column">Apply condition based hyper link for specific row or column</a></li>
+<li><a href="/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column">Apply conditional formatting for specific row or column</a></li>
+<li><a href="/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor">Change load limited data in member editor</a></li>
+<li><a href="/ej2-react/pivotview/how-to/customize-cells-elements">Customize cells elements</a></li>
+<li><a href="/ej2-react/pivotview/how-to/customize-empty-value-cells">Customize empty value cellss</a></li>
+<li><a href="/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-grid">Customize the icons for pivot grid</a></li>
+<li><a href="/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information">Perform cell selection and get selected cells information</a></li>
+<li><a href="/ej2-react/pivotview/how-to/show-hide-tool-tip">Show hide tool tip</a></li>
 </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/pivotview/">API Reference</a></li>

ej2-react/code-snippet/pivot-table/accessibility/app/App.css

@@ -0,0 +1,12 @@
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-calendars/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-dropdowns/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-grids/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-charts/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-inputs/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-popups/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-splitbuttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-pivotview/styles/material.css');

ej2-react/code-snippet/pivot-table/accessibility/app/App.jsx

@@ -5,8 +5,8 @@ import {
   ConditionalFormatting, NumberFormatting, PDFExport, ExcelExport
 } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import * as data from './datasource.json';
+import './App.css';
 
 function App() {
   let pivotData = data.pivotData;
@@ -376,4 +376,4 @@ function App() {
   }
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));
+

ej2-react/code-snippet/pivot-table/accessibility/app/App.tsx

@@ -5,10 +5,10 @@ import {
   CellEditSettings, Grouping
 } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { pivotData } from './datasource';
 import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartSettings';
 import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
+import './App.css';
 
 function App() {
   let dataSourceSettings: IDataOptions = {
@@ -163,7 +163,7 @@ function App() {
     });
   }
 
-  return (<PivotViewComponent id='PivotView' ref={d => pivotObj = d} dataSourceSettings={dataSourceSettings} width={'100%'}
+  return (<PivotViewComponent id='PivotView' ref={ (d: PivotViewComponent) => pivotObj = d } dataSourceSettings={dataSourceSettings} width={'100%'}
     height={350} showFieldList={true} gridSettings={gridSettings} allowExcelExport={true}
     allowConditionalFormatting={true} allowNumberFormatting={true} allowPdfExport={true} showToolbar={true}
     allowCalculatedField={true} displayOption={{ view: 'Both' }} toolbar={toolbarOptions} newReport={newReport.bind(this)}
@@ -177,4 +177,3 @@ function App() {
 
 };
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));

ej2-react/code-snippet/pivot-table/accessibility/app/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

ej2-react/code-snippet/pivot-table/accessibility/index.html

@@ -8,18 +8,6 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-base/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-buttons/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-calendars/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-dropdowns/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-grids/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-charts/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-inputs/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-lists/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-navigations/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-popups/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-splitbuttons/styles/material3.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/24.1.41/ej2-pivotview/styles/material3.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>

ej2-react/code-snippet/pivot-table/accessibility/systemjs.config.js

@@ -9,7 +9,7 @@ System.config({
         "jsx": "react"
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/24.1.41/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
     },
     map: {
         app: 'app',
@@ -41,16 +41,18 @@ System.config({
         "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
         "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
         "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
-        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",    
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+        'plugin-css': 'https://unpkg.com/systemjs-plugin-css@0.1.37/css.js',    
     },
     meta: {
         '*.json': { loader: 'plugin-json' },
         'typescript': {
             "exports": "ts"
-        }
+        },
+        '*.css': { loader: 'plugin-css' }
     },
     packages: {
-        'app': { main: 'App', defaultExtension: 'jsx' },
+        'app': { main: 'index', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/background-css-cs1/app/App.css

@@ -0,0 +1,12 @@
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-calendars/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-dropdowns/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-grids/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-charts/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-inputs/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-popups/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-splitbuttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-pivotview/styles/material.css');

ej2-react/code-snippet/pivot-table/background-css-cs1/app/App.jsx

@@ -1,6 +1,5 @@
 import { CalculatedField, FieldList, Inject, PivotViewComponent, GroupingBar } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { pivotData } from './datasource';
 const SAMPLE_CSS = `
   //Value Cells
@@ -22,6 +21,8 @@ const SAMPLE_CSS = `
     /* .e-pivotview .e-gtot  {
     background-color: greenYellow !important;
   }*/`;
+import './App.css';
+
 function App() {
     let dataSourceSettings = {
         columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
@@ -37,7 +38,6 @@ function App() {
             <style>{SAMPLE_CSS}</style>
             <PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true} showGroupingBar={true}><Inject services={[CalculatedField, FieldList, GroupingBar]}/> </PivotViewComponent>
         </div>);
-}
-;
+};
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));
+

ej2-react/code-snippet/pivot-table/background-css-cs1/app/App.tsx

@@ -1,8 +1,5 @@
-
-
 import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent, GroupingBar } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { pivotData } from './datasource';
 
 const SAMPLE_CSS = `
@@ -25,6 +22,7 @@ const SAMPLE_CSS = `
     /* .e-pivotview .e-gtot  {
     background-color: greenYellow !important;
   }*/`;
+import './App.css';
 
 function App() {
 
@@ -42,13 +40,9 @@ function App() {
   return (
         <div>
             <style>{SAMPLE_CSS}</style>
-            <PivotViewComponent  ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true} showGroupingBar={true}><Inject services={[CalculatedField, FieldList, GroupingBar]}/> </PivotViewComponent>
+            <PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} dataSourceSettings={dataSourceSettings} allowCalculatedField={true} showFieldList={true} showGroupingBar={true}><Inject services={[CalculatedField, FieldList, GroupingBar]}/> </PivotViewComponent>
         </div>
     )
 };
 
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));
-
-
-

ej2-react/code-snippet/pivot-table/background-css-cs1/app/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

ej2-react/code-snippet/pivot-table/background-css-cs1/index.html

@@ -8,18 +8,6 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-charts/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-pivotview/styles/material.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>

ej2-react/code-snippet/pivot-table/background-css-cs1/systemjs.config.js

@@ -9,7 +9,7 @@ System.config({
         "jsx": "react"
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/21.1.35/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
     },
     map: {
         app: 'app',
@@ -47,10 +47,11 @@ System.config({
         '*.json': { loader: 'plugin-json' },
         'typescript': {
             "exports": "ts"
-        }
+        },
+        '*.css': { loader: 'plugin-css' }
     },
     packages: {
-        'app': { main: 'App', defaultExtension: 'tsx' },
+        'app': { main: 'index', defaultExtension: 'tsx' },
     }
 
 });

ej2-react/code-snippet/pivot-table/default-cs1/app/App.css

@@ -0,0 +1,12 @@
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-base/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-buttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-calendars/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-dropdowns/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-grids/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-charts/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-inputs/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-lists/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-navigations/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-popups/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-splitbuttons/styles/material.css');
+@import url('https://cdn.syncfusion.com/ej2/26.1.35/ej2-pivotview/styles/material.css');

ej2-react/code-snippet/pivot-table/default-cs1/app/App.jsx

@@ -1,7 +1,8 @@
 import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { pivotData } from './datasource';
+import './App.css';
+
 function App() {
     let dataSourceSettings = {
         columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
@@ -15,7 +16,6 @@ function App() {
     };
     let pivotObj;
     return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
-}
-;
+};
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));
+

ej2-react/code-snippet/pivot-table/default-cs1/app/App.tsx

@@ -1,9 +1,7 @@
-
-
 import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { pivotData } from './datasource';
+import './App.css';
 
 function App() {
 
@@ -18,11 +16,7 @@ function App() {
     values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount', type: 'Sum' }]
   }
   let pivotObj: PivotViewComponent;
-    return (<PivotViewComponent  ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
+    return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
 };
 
 export default App;
-ReactDOM.render(<App />, document.getElementById('root'));
-
-
-

ej2-react/code-snippet/pivot-table/default-cs1/app/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

ej2-react/code-snippet/pivot-table/default-cs1/index.html

@@ -8,18 +8,6 @@
     <meta name="description" content="Essential JS 2 for React Components" />
     <meta name="author" content="Syncfusion" />
     <link href="index.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-calendars/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-charts/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
-    <link href="https://cdn.syncfusion.com/ej2/21.1.35/ej2-pivotview/styles/material.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>

ej2-react/code-snippet/pivot-table/default-cs1/systemjs.config.js

@@ -9,7 +9,7 @@ System.config({
         "jsx": "react"
     },
     paths: {
-        "syncfusion:": "https://cdn.syncfusion.com/ej2/21.1.35/"
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
     },
     map: {
         app: 'app',
@@ -41,16 +41,18 @@ System.config({
         "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
         "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js",
         "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
-        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",    
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+        'plugin-css': 'https://unpkg.com/systemjs-plugin-css@0.1.37/css.js',    
     },
     meta: {
         '*.json': { loader: 'plugin-json' },
         'typescript': {
             "exports": "ts"
-        }
+        },
+        '*.css': { loader: 'plugin-css' }
     },
     packages: {
-        'app': { main: 'App', defaultExtension: 'tsx' },
+        'app': { main: 'index', defaultExtension: 'tsx' },
     }
 
 });