diff --git a/performanceMetrics/src/App/App.js b/performanceMetrics/src/App/App.js
index 7943808..c66e8dd 100644
--- a/performanceMetrics/src/App/App.js
+++ b/performanceMetrics/src/App/App.js
@@ -11,7 +11,7 @@ import {useCallback, useEffect, useState} from 'react';
 
 import Chart from '../views/Chart';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const listOfSandstoneComponent = [
 	'Overall',
diff --git a/performanceMetrics/src/views/Chart.js b/performanceMetrics/src/views/Chart.js
index b4a3fa6..39c78a8 100644
--- a/performanceMetrics/src/views/Chart.js
+++ b/performanceMetrics/src/views/Chart.js
@@ -3,7 +3,7 @@ import {Heading} from '@enact/sandstone/Heading';
 import PropTypes from 'prop-types';
 import {CartesianGrid, Label, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis} from 'recharts';
 
-import css from './Chart.module.less';
+import * as css from './Chart.module.less';
 
 const CustomTooltip = ({active, payload}) => {
 	if (active && payload && payload.length) {
diff --git a/src/App/Agate-App.js b/src/App/Agate-App.js
index d807577..b096b4c 100644
--- a/src/App/Agate-App.js
+++ b/src/App/Agate-App.js
@@ -48,7 +48,7 @@ import TooltipDecorator from '../views/agate/TooltipDecorator';
 import VirtualList from '../views/agate/VirtualList';
 import WindDirectionControl from '../views/agate/WindDirectionControl';
 
-import css from './App.less';
+import * as css from './App.less';
 
 import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
 
diff --git a/src/App/Sandstone-App.js b/src/App/Sandstone-App.js
index 1d83089..35bc1ed 100644
--- a/src/App/Sandstone-App.js
+++ b/src/App/Sandstone-App.js
@@ -52,7 +52,7 @@ import VideoPlayer from '../views/sandstone/VideoPlayer';
 import VirtualList from '../views/sandstone/VirtualList';
 import WizardPanels from '../views/sandstone/WizardPanels';
 
-import css from './App.less';
+import * as css from './App.less';
 
 import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';