diff --git a/console/src/App/App.js b/console/src/App/App.js
index 0546adf2..81c5fce5 100644
--- a/console/src/App/App.js
+++ b/console/src/App/App.js
@@ -32,7 +32,7 @@ import Weather from '../views/WeatherPanel';
 
 import AppContextConnect from './AppContextConnect';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 add('backspace', 8);
 
diff --git a/console/src/components/AppIconCell/AppIconCell.js b/console/src/components/AppIconCell/AppIconCell.js
index 0c63bb9f..beada574 100644
--- a/console/src/components/AppIconCell/AppIconCell.js
+++ b/console/src/components/AppIconCell/AppIconCell.js
@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 import {Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './AppIconCell.module.less';
+import * as css from './AppIconCell.module.less';
 
 const AppIconCell = kind({
 	name: 'AppIconCell',
diff --git a/console/src/components/CallPopup/CallPopup.js b/console/src/components/CallPopup/CallPopup.js
index 3107bf91..f84b40bb 100644
--- a/console/src/components/CallPopup/CallPopup.js
+++ b/console/src/components/CallPopup/CallPopup.js
@@ -5,7 +5,7 @@ import kind from '@enact/core/kind';
 import {Cell, Row} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './CallPopup.module.less';
+import * as css from './CallPopup.module.less';
 
 const forwardSimpleEvent = type => handle(adaptEvent(() => ({type}), forward(type)));
 
diff --git a/console/src/components/Clock/Clock.js b/console/src/components/Clock/Clock.js
index b56889eb..01396291 100644
--- a/console/src/components/Clock/Clock.js
+++ b/console/src/components/Clock/Clock.js
@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
-import css from './Clock.module.less';
+import * as css from './Clock.module.less';
 
 const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
diff --git a/console/src/components/CompactHVAC/CompactHVAC.js b/console/src/components/CompactHVAC/CompactHVAC.js
index d84edd84..5aa8a8a7 100644
--- a/console/src/components/CompactHVAC/CompactHVAC.js
+++ b/console/src/components/CompactHVAC/CompactHVAC.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 // import AppStateConnect from '../../App/AppContextConnect';
 import Widget from '../Widget';
 
-import css from './CompactHVAC.module.less';
+import * as css from './CompactHVAC.module.less';
 
 const temps = ['HI', '74°', '73°', '72°', '71°', '70°', '69°', '68°', '67°', '66°', 'LO'];
 
diff --git a/console/src/components/CompactHeader/CompactHeader.js b/console/src/components/CompactHeader/CompactHeader.js
index 1ccd3908..cdddf84f 100644
--- a/console/src/components/CompactHeader/CompactHeader.js
+++ b/console/src/components/CompactHeader/CompactHeader.js
@@ -5,7 +5,7 @@ import kind from '@enact/core/kind';
 import {Row, Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './CompactHeader.module.less';
+import * as css from './CompactHeader.module.less';
 
 const TitleHeading = kind({
 	name: 'TitleHeading',
diff --git a/console/src/components/CompactHeater/CompactHeater.js b/console/src/components/CompactHeater/CompactHeater.js
index b6f50966..5c830735 100644
--- a/console/src/components/CompactHeater/CompactHeater.js
+++ b/console/src/components/CompactHeater/CompactHeater.js
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import AppStateConnect from '../../App/AppContextConnect';
 import Widget from '../Widget';
 
-import css from './CompactHeater.module.less';
+import * as css from './CompactHeater.module.less';
 
 const CompactHeaterBase = kind({
 	name: 'CompactHeater',
diff --git a/console/src/components/CompactMap/CompactMap.js b/console/src/components/CompactMap/CompactMap.js
index 9c06e933..f75d39d7 100644
--- a/console/src/components/CompactMap/CompactMap.js
+++ b/console/src/components/CompactMap/CompactMap.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import MapController from '../MapController';
 import Widget from '../Widget';
 
-import css from './CompactMap.module.less';
+import * as css from './CompactMap.module.less';
 
 const CompactMapBase = kind({
 	name: 'CompactMap',
diff --git a/console/src/components/CompactMultimedia/CompactMultimedia.js b/console/src/components/CompactMultimedia/CompactMultimedia.js
index d88a00fb..d958ff47 100644
--- a/console/src/components/CompactMultimedia/CompactMultimedia.js
+++ b/console/src/components/CompactMultimedia/CompactMultimedia.js
@@ -7,7 +7,7 @@ import {ScreenSelectionPopup} from '../../../../components/ScreenSelectionPopup'
 import {MultimediaDecorator, ResponsiveVirtualList} from '../../views/Multimedia';
 import {WidgetBase, WidgetDecorator} from '../Widget';
 
-import componentCss from './CompactMultimedia.module.less';
+import * as componentCss from './CompactMultimedia.module.less';
 
 const CompactMultimediaBase = kind({
 	name: 'CompactMultimedia',
diff --git a/console/src/components/CompactMusic/CompactMusic.js b/console/src/components/CompactMusic/CompactMusic.js
index 181bc298..84ace03e 100644
--- a/console/src/components/CompactMusic/CompactMusic.js
+++ b/console/src/components/CompactMusic/CompactMusic.js
@@ -4,7 +4,7 @@ import {Cell} from '@enact/ui/Layout';
 
 import Widget from '../Widget';
 
-import css from './CompactMusic.module.less';
+import * as css from './CompactMusic.module.less';
 
 const CompactMusicBase = kind({
 	name: 'CompactMusic',
diff --git a/console/src/components/CompactScreenMonitor/CompactScreenMonitor.js b/console/src/components/CompactScreenMonitor/CompactScreenMonitor.js
index 0d3d0a0c..38c6d325 100644
--- a/console/src/components/CompactScreenMonitor/CompactScreenMonitor.js
+++ b/console/src/components/CompactScreenMonitor/CompactScreenMonitor.js
@@ -6,7 +6,7 @@ import compose from 'ramda/src/compose';
 import {WidgetBase, WidgetDecorator} from '../Widget';
 import AppStateConnect from '../../App/AppContextConnect';
 
-import css from './CompactScreenMonitor.module.less';
+import * as css from './CompactScreenMonitor.module.less';
 
 const CompactScreenMonitorBase = kind({
 	name: 'CompactScreenMonitor',
diff --git a/console/src/components/CompactWeather/CompactWeather.js b/console/src/components/CompactWeather/CompactWeather.js
index fb0fc006..3550b402 100644
--- a/console/src/components/CompactWeather/CompactWeather.js
+++ b/console/src/components/CompactWeather/CompactWeather.js
@@ -6,7 +6,7 @@ import AppStateConnect from '../../App/AppContextConnect';
 import WeatherItem from '../WeatherItem';
 import Widget from '../Widget';
 
-import css from './CompactWeather.module.less';
+import * as css from './CompactWeather.module.less';
 
 const CompactWeatherBase = kind({
 	name: 'CompactWeather',
diff --git a/console/src/components/ContactThumbnail/ContactThumbnail.js b/console/src/components/ContactThumbnail/ContactThumbnail.js
index f0552eba..1725f0a8 100644
--- a/console/src/components/ContactThumbnail/ContactThumbnail.js
+++ b/console/src/components/ContactThumbnail/ContactThumbnail.js
@@ -3,7 +3,7 @@ import Item from '@enact/agate/Item';
 import kind from '@enact/core/kind';
 import PropTypes from 'prop-types';
 
-import css from './ContactThumbnail.module.less';
+import * as css from './ContactThumbnail.module.less';
 
 const ContactThumbnail = kind({
 	name: 'ContactThumbnail',
diff --git a/console/src/components/CustomLayout/CustomLayout.js b/console/src/components/CustomLayout/CustomLayout.js
index 32fb7549..ab7154d0 100644
--- a/console/src/components/CustomLayout/CustomLayout.js
+++ b/console/src/components/CustomLayout/CustomLayout.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import AppContextConnect from '../../App/AppContextConnect';
 
-import css from './CustomLayout.module.less';
+import * as css from './CustomLayout.module.less';
 
 const allSlotNames = ['bottom', 'bottomLeft', 'bottomRight', 'children', 'top', 'topLeft', 'topRight', 'left', 'right'];
 
diff --git a/console/src/components/DestinationList/DestinationList.js b/console/src/components/DestinationList/DestinationList.js
index 930cea8a..46fbc08f 100644
--- a/console/src/components/DestinationList/DestinationList.js
+++ b/console/src/components/DestinationList/DestinationList.js
@@ -9,7 +9,7 @@ import {equals} from 'ramda';
 import {propTypeLatLonList} from '../../data/proptypes';
 import Marker from '../MapCore/Marker';
 
-import css from './DestinationList.module.less';
+import * as css from './DestinationList.module.less';
 
 const DestinationButton = (props) => {
 	const {children, 'data-index': index, ...rest} = props;
diff --git a/console/src/components/Dialer/Dialer.js b/console/src/components/Dialer/Dialer.js
index 0b3ef0ee..5451870e 100644
--- a/console/src/components/Dialer/Dialer.js
+++ b/console/src/components/Dialer/Dialer.js
@@ -3,7 +3,7 @@ import kind from '@enact/core/kind';
 import {Row, Column, Cell} from '@enact/ui/Layout';
 import PropTypes from 'prop-types';
 
-import css from './Dialer.module.less';
+import * as css from './Dialer.module.less';
 
 const Digit = kind({
 	name: 'Digit',
diff --git a/console/src/components/MapController/MapController.js b/console/src/components/MapController/MapController.js
index 3d7b8dc0..c700e4ba 100644
--- a/console/src/components/MapController/MapController.js
+++ b/console/src/components/MapController/MapController.js
@@ -16,7 +16,7 @@ import {propTypeLatLon, propTypeLatLonList} from '../../data/proptypes';
 import DestinationList from '../DestinationList';
 import MapCore from '../MapCore';
 
-import css from './MapController.module.less';
+import * as css from './MapController.module.less';
 
 const StyledButton = ({style = {}, ...rest}) => {
 	style.width = 'auto';  // Allow the buttons to properly self-size. Margins + auto-sizing confuses relatively positioned elements with 0 width and flex.
diff --git a/console/src/components/MapCore/MapCore.js b/console/src/components/MapCore/MapCore.js
index f4e82294..8e26d2b2 100644
--- a/console/src/components/MapCore/MapCore.js
+++ b/console/src/components/MapCore/MapCore.js
@@ -15,8 +15,8 @@ import CarPng from '../../../assets/car.png';
 import {propTypeLatLon, propTypeLatLonList} from '../../data/proptypes';
 import {ServiceLayerContext} from '../../data/ServiceLayer';
 
-import css from './MapCore.module.less';
-import markerCss from './Marker.module.less';
+import * as css from './MapCore.module.less';
+import * as markerCss from './Marker.module.less';
 
 const linear = (input) => input;
 
diff --git a/console/src/components/MapCore/Marker.js b/console/src/components/MapCore/Marker.js
index 23bf21ce..edb5a667 100644
--- a/console/src/components/MapCore/Marker.js
+++ b/console/src/components/MapCore/Marker.js
@@ -2,7 +2,7 @@ import Skinnable from '@enact/agate/Skinnable';
 import kind from '@enact/core/kind';
 // import PropTypes from 'prop-types';
 
-import css from './Marker.module.less';
+import * as css from './Marker.module.less';
 
 const MarkerBase = kind({
 	name: 'Marker',
diff --git a/console/src/components/ProfileDrawer/ProfileDrawer.js b/console/src/components/ProfileDrawer/ProfileDrawer.js
index 38415fa3..b82745e9 100644
--- a/console/src/components/ProfileDrawer/ProfileDrawer.js
+++ b/console/src/components/ProfileDrawer/ProfileDrawer.js
@@ -13,7 +13,7 @@ import AppContextConnect from '../../App/AppContextConnect';
 import UserAvatar from '../UserAvatar';
 import UserSelectionPopup from '../UserSelectionPopup';
 
-import componentCss from './ProfileDrawer.module.less';
+import * as componentCss from './ProfileDrawer.module.less';
 
 const panelIndexes = [
 	'home',
diff --git a/console/src/components/UserAvatar/UserAvatar.js b/console/src/components/UserAvatar/UserAvatar.js
index d8036939..2a8c1953 100644
--- a/console/src/components/UserAvatar/UserAvatar.js
+++ b/console/src/components/UserAvatar/UserAvatar.js
@@ -7,7 +7,7 @@ import lauraAvatar from '../../../assets/laura.png';
 import thomasAvatar from '../../../assets/thomas.png';
 import williamAvatar from '../../../assets/william.png';
 
-import componentCss from './UserAvatar.module.less';
+import * as componentCss from './UserAvatar.module.less';
 
 const userAvatars = [lauraAvatar, thomasAvatar, williamAvatar];
 
diff --git a/console/src/components/UserSelectionPopup/UserSelectionPopup.js b/console/src/components/UserSelectionPopup/UserSelectionPopup.js
index 9e5e5448..4271ef95 100644
--- a/console/src/components/UserSelectionPopup/UserSelectionPopup.js
+++ b/console/src/components/UserSelectionPopup/UserSelectionPopup.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import AppContextConnect from '../../App/AppContextConnect';
 import UserAvatar from '../UserAvatar';
 
-import css from './UserSelectionPopup.module.less';
+import * as css from './UserSelectionPopup.module.less';
 
 const UserItem = kind({
 	name: 'UserItem',
diff --git a/console/src/components/WeatherItem/WeatherItem.js b/console/src/components/WeatherItem/WeatherItem.js
index 160b9eb6..e740084c 100644
--- a/console/src/components/WeatherItem/WeatherItem.js
+++ b/console/src/components/WeatherItem/WeatherItem.js
@@ -13,7 +13,7 @@ import snowy from '../../../assets/weather/snowy.png';
 import sunny from '../../../assets/weather/sunny.png';
 import thunderstorm from '../../../assets/weather/thunderstorm.png';
 
-import css from './WeatherItem.module.less';
+import * as css from './WeatherItem.module.less';
 
 const WeatherItemBase = kind({
 	name: 'WeatherItem',
diff --git a/console/src/components/WelcomePopup/WelcomePopup.js b/console/src/components/WelcomePopup/WelcomePopup.js
index 811a2658..e2eaae40 100644
--- a/console/src/components/WelcomePopup/WelcomePopup.js
+++ b/console/src/components/WelcomePopup/WelcomePopup.js
@@ -20,7 +20,7 @@ import MapController from '../MapController';
 
 import UserAvatar from '../UserAvatar';
 
-import css from './WelcomePopup.module.less';
+import * as css from './WelcomePopup.module.less';
 
 const getCompactComponent = ({components, key, onSendVideo}) => {
 	let CompactComponent; // name changed because of {Component} import above
diff --git a/console/src/components/Widget/Widget.js b/console/src/components/Widget/Widget.js
index 6a538159..fc60c7ab 100644
--- a/console/src/components/Widget/Widget.js
+++ b/console/src/components/Widget/Widget.js
@@ -8,7 +8,7 @@ import compose from 'ramda/src/compose';
 
 import CompactHeader from '../CompactHeader';
 
-import css from './Widget.module.less';
+import * as css from './Widget.module.less';
 
 const WidgetBase = kind({
 	name: 'Widget',
diff --git a/console/src/views/AppList.js b/console/src/views/AppList.js
index 46785ca1..c20a7804 100644
--- a/console/src/views/AppList.js
+++ b/console/src/views/AppList.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {getPanelIndexOf} from '../App';
 import AppIconCell from '../components/AppIconCell';
 
-import css from './AppList.module.less';
+import * as css from './AppList.module.less';
 
 const AppList = kind({
 	name: 'Home',
diff --git a/console/src/views/Dashboard.js b/console/src/views/Dashboard.js
index 1d5efac9..99e20509 100644
--- a/console/src/views/Dashboard.js
+++ b/console/src/views/Dashboard.js
@@ -13,7 +13,7 @@ import CarPng from '../../assets/car.png';
 import AppContextConnect from '../App/AppContextConnect';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './Dashboard.module.less';
+import * as css from './Dashboard.module.less';
 
 const ResponsiveLayout = ResponsiveBox(({containerShape, ...rest}) => {
 	const orientation = (containerShape.orientation === 'portrait') ? 'vertical' : 'horizontal';
diff --git a/console/src/views/HVAC.js b/console/src/views/HVAC.js
index 48a5d09f..4da4eb4a 100644
--- a/console/src/views/HVAC.js
+++ b/console/src/views/HVAC.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import AppContextConnect from '../App/AppContextConnect';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './HVAC.module.less';
+import * as css from './HVAC.module.less';
 
 const speeds = ['Off', 'Low', 'Medium', 'High'];
 const temps = ['HI', '74°', '73°', '72°', '71°', '70°', '69°', '68°', '67°', '66°', 'LO'];
diff --git a/console/src/views/Home.js b/console/src/views/Home.js
index 1e115394..f82cb0c9 100644
--- a/console/src/views/Home.js
+++ b/console/src/views/Home.js
@@ -17,7 +17,7 @@ import CompactMusic from '../components/CompactMusic';
 import CompactScreenMonitor from '../components/CompactScreenMonitor';
 import CompactWeather from '../components/CompactWeather';
 
-import css from './Home.module.less';
+import * as css from './Home.module.less';
 
 const allSlotNames = ['small1', 'small2', 'medium', 'large', 'tray1', 'tray2', 'tray3', 'tray4'];
 
diff --git a/console/src/views/Map.js b/console/src/views/Map.js
index cc21df23..b854bca6 100644
--- a/console/src/views/Map.js
+++ b/console/src/views/Map.js
@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 
 import MapController from '../components/MapController';
 
-import css from './Map.module.less';
+import * as css from './Map.module.less';
 
 const MapViewBase = kind({
 	name: 'MapView',
diff --git a/console/src/views/Multimedia.js b/console/src/views/Multimedia.js
index 9c1ac92c..f48344da 100644
--- a/console/src/views/Multimedia.js
+++ b/console/src/views/Multimedia.js
@@ -17,7 +17,7 @@ import CustomLayout from '../components/CustomLayout';
 import ScreenSelectionPopup from '../../../components/ScreenSelectionPopup';
 import youtubeVideos from '../data/youtubeapi.json';
 
-import css from './Multimedia.module.less';
+import * as css from './Multimedia.module.less';
 
 const IFrame = kind({
 	name: 'IFrame',
diff --git a/console/src/views/Phone.js b/console/src/views/Phone.js
index 2ee24593..7c86361e 100644
--- a/console/src/views/Phone.js
+++ b/console/src/views/Phone.js
@@ -17,7 +17,7 @@ import ContactThumbnail from '../components/ContactThumbnail';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 import Dialer from '../components/Dialer';
 
-import css from './Phone.module.less';
+import * as css from './Phone.module.less';
 
 const contacts = [
 	{name: 'Blake',    number: '535-953-3185'},
diff --git a/console/src/views/Radio.js b/console/src/views/Radio.js
index dfde31e5..1244ddee 100644
--- a/console/src/views/Radio.js
+++ b/console/src/views/Radio.js
@@ -13,7 +13,7 @@ import {Component} from 'react';
 import PresetItem from '../components/PresetItem';
 import CustomLayout, {SaveLayoutArrangement} from '../components/CustomLayout';
 
-import css from './Radio.module.less';
+import * as css from './Radio.module.less';
 
 const wrapFrequency = (frequency, factor) => {
 	// case 'tune-up':
diff --git a/console/src/views/Settings.js b/console/src/views/Settings.js
index 2530b742..2637d379 100644
--- a/console/src/views/Settings.js
+++ b/console/src/views/Settings.js
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import {getPanelIndexOf} from '../App';
 import NetworkInfo from '../../../components/NetworkInfo';
 
-import viewCss from './Settings.module.less';
+import * as viewCss from './Settings.module.less';
 
 const SwitchItemCell =  kind({
 	name: 'SwitchItemCell',
diff --git a/console/src/views/ThemeSettings.js b/console/src/views/ThemeSettings.js
index 8dbf7a66..f82ea670 100644
--- a/console/src/views/ThemeSettings.js
+++ b/console/src/views/ThemeSettings.js
@@ -11,7 +11,7 @@ import compose from 'ramda/src/compose';
 import {getPanelIndexOf} from '../App';
 import AppContextConnect from '../App/AppContextConnect';
 
-import componentCss from './Settings.module.less';
+import * as componentCss from './Settings.module.less';
 
 // Skin setup area
 const skinCollection = {
diff --git a/console/src/views/WeatherPanel.js b/console/src/views/WeatherPanel.js
index a9a5ca7e..772533fb 100644
--- a/console/src/views/WeatherPanel.js
+++ b/console/src/views/WeatherPanel.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import WeatherItem from '../components/WeatherItem';
 import AppStateConnect from '../App/AppContextConnect';
 
-import viewCSS from './WeatherPanel.module.less';
+import * as viewCss from './WeatherPanel.module.less';
 
 const Weather = kind({
 	name: 'Weather',
diff --git a/copilot/src/App/App.js b/copilot/src/App/App.js
index 3f2220a3..6a470090 100644
--- a/copilot/src/App/App.js
+++ b/copilot/src/App/App.js
@@ -15,7 +15,7 @@ import ScreenSelectionPopup from '../../../components/ScreenSelectionPopup';
 
 import appConfig from './configLoader';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const screenIds = [1];
 const durationIncrements = ['day', 'hour', 'min', 'second'];
diff --git a/kitchen-sink/src/App/App.js b/kitchen-sink/src/App/App.js
index 4b24b19f..d5a401ba 100644
--- a/kitchen-sink/src/App/App.js
+++ b/kitchen-sink/src/App/App.js
@@ -4,7 +4,7 @@ import kind from '@enact/core/kind';
 
 import MainPanel from '../views/MainPanel';
 
-import css from './App.module.less';
+import * as css from './App.module.less';
 
 const App = kind({
 	name: 'App',