From 80c48b3e5fb00598a83f5efb52323ad49f73b9e9 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Fri, 15 Dec 2023 14:36:25 -0800
Subject: [PATCH] fix(scss): added ?lit to every scss import for vite

---
 .../carbon-web-components/.storybook2/templates/with-layer.ts   | 2 +-
 .../src/components/accordion/accordion-item-skeleton.ts         | 2 +-
 .../src/components/accordion/accordion-item.ts                  | 2 +-
 .../src/components/accordion/accordion-skeleton.ts              | 2 +-
 .../carbon-web-components/src/components/accordion/accordion.ts | 2 +-
 .../src/components/breadcrumb/breadcrumb-item.ts                | 2 +-
 .../src/components/breadcrumb/breadcrumb-link.ts                | 2 +-
 .../src/components/breadcrumb/breadcrumb-overflow-menu.ts       | 2 +-
 .../src/components/breadcrumb/breadcrumb-skeleton.ts            | 2 +-
 .../src/components/breadcrumb/breadcrumb.ts                     | 2 +-
 .../carbon-web-components/src/components/button/button-set.ts   | 2 +-
 .../src/components/button/button-skeleton.ts                    | 2 +-
 .../carbon-web-components/src/components/button/button.ts       | 1 -
 .../src/components/checkbox/checkbox-skeleton.ts                | 2 +-
 .../carbon-web-components/src/components/checkbox/checkbox.ts   | 2 +-
 .../src/components/code-snippet/code-snippet-skeleton.ts        | 2 +-
 .../src/components/code-snippet/code-snippet.ts                 | 2 +-
 .../src/components/combo-box/combo-box-item.ts                  | 2 +-
 .../carbon-web-components/src/components/combo-box/combo-box.ts | 2 +-
 .../src/components/content-switcher/content-switcher-item.ts    | 2 +-
 .../src/components/content-switcher/content-switcher.ts         | 2 +-
 .../src/components/copy-button/copy-button.ts                   | 2 +-
 .../packages/carbon-web-components/src/components/copy/copy.ts  | 2 +-
 .../src/components/data-table/table-batch-actions.ts            | 2 +-
 .../src/components/data-table/table-body.ts                     | 2 +-
 .../src/components/data-table/table-cell-content.ts             | 2 +-
 .../src/components/data-table/table-cell.ts                     | 2 +-
 .../src/components/data-table/table-expanded-row.ts             | 2 +-
 .../src/components/data-table/table-head.ts                     | 2 +-
 .../src/components/data-table/table-header-cell.ts              | 2 +-
 .../src/components/data-table/table-header-description.ts       | 2 +-
 .../src/components/data-table/table-header-title.ts             | 2 +-
 .../src/components/data-table/table-row.ts                      | 2 +-
 .../src/components/data-table/table-skeleton.ts                 | 2 +-
 .../src/components/data-table/table-toolbar-content.ts          | 2 +-
 .../src/components/data-table/table-toolbar-search.ts           | 2 +-
 .../src/components/data-table/table-toolbar.ts                  | 2 +-
 .../carbon-web-components/src/components/data-table/table.ts    | 2 +-
 .../src/components/date-picker/date-picker-input-skeleton.ts    | 2 +-
 .../src/components/date-picker/date-picker-input.ts             | 2 +-
 .../src/components/date-picker/date-picker.ts                   | 2 +-
 .../src/components/dropdown/dropdown-item.ts                    | 2 +-
 .../src/components/dropdown/dropdown-skeleton.ts                | 2 +-
 .../carbon-web-components/src/components/dropdown/dropdown.ts   | 2 +-
 .../src/components/file-uploader/file-uploader-button.ts        | 2 +-
 .../components/file-uploader/file-uploader-drop-container.ts    | 2 +-
 .../src/components/file-uploader/file-uploader-item.ts          | 2 +-
 .../src/components/file-uploader/file-uploader.ts               | 2 +-
 .../src/components/form-group/form-group.ts                     | 2 +-
 .../carbon-web-components/src/components/form/form-item.ts      | 2 +-
 .../src/components/icon-button/icon-button.ts                   | 2 +-
 .../src/components/inline-loading/inline-loading.ts             | 2 +-
 .../carbon-web-components/src/components/layer/layer-story.ts   | 2 +-
 .../carbon-web-components/src/components/layer/layer.ts         | 2 +-
 .../packages/carbon-web-components/src/components/link/link.ts  | 2 +-
 .../carbon-web-components/src/components/list/list-item.ts      | 2 +-
 .../carbon-web-components/src/components/list/unordered-list.ts | 2 +-
 .../carbon-web-components/src/components/loading/loading.ts     | 2 +-
 .../src/components/modal/modal-body-content.ts                  | 2 +-
 .../carbon-web-components/src/components/modal/modal-body.ts    | 2 +-
 .../src/components/modal/modal-close-button.ts                  | 2 +-
 .../src/components/modal/modal-footer-button.ts                 | 2 +-
 .../carbon-web-components/src/components/modal/modal-footer.ts  | 2 +-
 .../carbon-web-components/src/components/modal/modal-header.ts  | 2 +-
 .../carbon-web-components/src/components/modal/modal-heading.ts | 2 +-
 .../carbon-web-components/src/components/modal/modal-label.ts   | 2 +-
 .../carbon-web-components/src/components/modal/modal.ts         | 2 +-
 .../src/components/multi-select/multi-select-item.ts            | 2 +-
 .../src/components/multi-select/multi-select.ts                 | 2 +-
 .../components/notification/actionable-notification-button.ts   | 2 +-
 .../src/components/notification/actionable-notification.ts      | 2 +-
 .../src/components/notification/inline-notification.ts          | 2 +-
 .../src/components/notification/toast-notification.ts           | 2 +-
 .../src/components/number-input/number-input-skeleton.ts        | 2 +-
 .../src/components/number-input/number-input.ts                 | 2 +-
 .../src/components/overflow-menu/overflow-menu-body.ts          | 2 +-
 .../src/components/overflow-menu/overflow-menu-item.ts          | 2 +-
 .../src/components/overflow-menu/overflow-menu.ts               | 2 +-
 .../src/components/pagination/pagination.ts                     | 2 +-
 .../src/components/popover/popover-content.ts                   | 2 +-
 .../src/components/popover/popover-story.ts                     | 2 +-
 .../carbon-web-components/src/components/popover/popover.ts     | 2 +-
 .../src/components/progress-bar/progress-bar.ts                 | 2 +-
 .../progress-indicator/progress-indicator-skeleton.ts           | 2 +-
 .../src/components/progress-indicator/progress-indicator.ts     | 2 +-
 .../src/components/progress-indicator/progress-step-skeleton.ts | 2 +-
 .../src/components/progress-indicator/progress-step.ts          | 2 +-
 .../src/components/radio-button/radio-button-group.ts           | 2 +-
 .../src/components/radio-button/radio-button-skeleton.ts        | 2 +-
 .../src/components/radio-button/radio-button.ts                 | 2 +-
 .../src/components/search/search-skeleton.ts                    | 2 +-
 .../carbon-web-components/src/components/search/search.ts       | 2 +-
 .../src/components/select/select-skeleton.ts                    | 2 +-
 .../carbon-web-components/src/components/select/select.ts       | 2 +-
 .../src/components/skeleton-placeholder/skeleton-placeholder.ts | 2 +-
 .../src/components/skeleton-text/skeleton-text.ts               | 2 +-
 .../src/components/skip-to-content/skip-to-content-story.ts     | 2 +-
 .../carbon-web-components/src/components/slider/slider-input.ts | 2 +-
 .../src/components/slider/slider-skeleton.ts                    | 2 +-
 .../carbon-web-components/src/components/slider/slider.ts       | 2 +-
 .../src/components/slug/slug-action-button.ts                   | 2 +-
 .../src/components/slug/slug-example-story.ts                   | 2 +-
 .../carbon-web-components/src/components/slug/slug-story.ts     | 2 +-
 .../packages/carbon-web-components/src/components/slug/slug.ts  | 2 +-
 .../carbon-web-components/src/components/stack/stack.ts         | 2 +-
 .../src/components/structured-list/structured-list-body.ts      | 2 +-
 .../src/components/structured-list/structured-list-cell.ts      | 2 +-
 .../src/components/structured-list/structured-list-head.ts      | 2 +-
 .../structured-list/structured-list-header-cell-skeleton.ts     | 2 +-
 .../components/structured-list/structured-list-header-cell.ts   | 2 +-
 .../components/structured-list/structured-list-header-row.ts    | 2 +-
 .../src/components/structured-list/structured-list-row.ts       | 2 +-
 .../src/components/structured-list/structured-list.ts           | 2 +-
 .../carbon-web-components/src/components/tabs/tab-skeleton.ts   | 2 +-
 .../packages/carbon-web-components/src/components/tabs/tab.ts   | 2 +-
 .../carbon-web-components/src/components/tabs/tabs-skeleton.ts  | 2 +-
 .../carbon-web-components/src/components/tabs/tabs-story.ts     | 2 +-
 .../packages/carbon-web-components/src/components/tabs/tabs.ts  | 2 +-
 .../packages/carbon-web-components/src/components/tag/tag.ts    | 2 +-
 .../src/components/text-input/text-input-skeleton.ts            | 2 +-
 .../src/components/text-input/text-input.ts                     | 2 +-
 .../src/components/textarea/textarea-skeleton.ts                | 2 +-
 .../carbon-web-components/src/components/textarea/textarea.ts   | 2 +-
 .../carbon-web-components/src/components/tile/clickable-tile.ts | 2 +-
 .../src/components/tile/expandable-tile.ts                      | 2 +-
 .../src/components/tile/selectable-tile.ts                      | 2 +-
 .../carbon-web-components/src/components/tile/tile-group.ts     | 2 +-
 .../packages/carbon-web-components/src/components/tile/tile.ts  | 2 +-
 .../src/components/toggle-tip/toggletip.ts                      | 2 +-
 .../carbon-web-components/src/components/toggle/toggle.ts       | 2 +-
 .../src/components/tooltip/tooltip-content.ts                   | 2 +-
 .../src/components/tooltip/tooltip-story.ts                     | 2 +-
 .../carbon-web-components/src/components/tooltip/tooltip.ts     | 2 +-
 .../src/components/ui-shell/header-global-action.ts             | 2 +-
 .../src/components/ui-shell/header-menu-button.ts               | 2 +-
 .../src/components/ui-shell/header-menu.ts                      | 2 +-
 .../src/components/ui-shell/header-name.ts                      | 2 +-
 .../src/components/ui-shell/header-nav-item.ts                  | 2 +-
 .../carbon-web-components/src/components/ui-shell/header-nav.ts | 2 +-
 .../src/components/ui-shell/header-panel.ts                     | 2 +-
 .../src/components/ui-shell/header-side-nav-items.ts            | 2 +-
 .../carbon-web-components/src/components/ui-shell/header.ts     | 2 +-
 .../src/components/ui-shell/side-nav-divider.ts                 | 2 +-
 .../src/components/ui-shell/side-nav-items.ts                   | 2 +-
 .../src/components/ui-shell/side-nav-link.ts                    | 2 +-
 .../src/components/ui-shell/side-nav-menu-item.ts               | 2 +-
 .../src/components/ui-shell/side-nav-menu.ts                    | 2 +-
 .../carbon-web-components/src/components/ui-shell/side-nav.ts   | 2 +-
 .../src/components/ui-shell/switcher-divider.ts                 | 2 +-
 .../src/components/ui-shell/switcher-item.ts                    | 2 +-
 .../carbon-web-components/src/components/ui-shell/switcher.ts   | 2 +-
 .../src/components/ui-shell/ui-shell-story.ts                   | 2 +-
 152 files changed, 151 insertions(+), 152 deletions(-)

diff --git a/web-components/packages/carbon-web-components/.storybook2/templates/with-layer.ts b/web-components/packages/carbon-web-components/.storybook2/templates/with-layer.ts
index c4b7c0340026..d7ff7d81493d 100644
--- a/web-components/packages/carbon-web-components/.storybook2/templates/with-layer.ts
+++ b/web-components/packages/carbon-web-components/.storybook2/templates/with-layer.ts
@@ -12,7 +12,7 @@ import { customElement, property } from 'lit/decorators.js';
 import Layers from '@carbon/icons/lib/layers/16';
 import { prefix } from '../../src/globals/settings';
 
-import styles from './with-layer.scss';
+import styles from './with-layer.scss?lit';
 
 /**
  * Storybook template layer component, strictly for presentation purposes
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts
index f787fdf12f02..f5d1601f84b3 100644
--- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts
@@ -12,7 +12,7 @@ import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import '../skeleton-text/index';
-import styles from './accordion.scss';
+import styles from './accordion.scss?lit';
 
 /**
  * Skeleton of accordion item.
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts
index 2054a8f12136..c7803e991629 100644
--- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts
@@ -15,7 +15,7 @@ import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import Handle from '../../globals/internal/handle';
 import { ACCORDION_ITEM_BREAKPOINT } from './defs';
-import styles from './accordion.scss';
+import styles from './accordion.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { ACCORDION_ITEM_BREAKPOINT };
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts
index 750e2a165a7b..f90011b4ab38 100644
--- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts
@@ -16,7 +16,7 @@ import { forEach } from '../../globals/internal/collection-helpers';
 import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
 import './accordion-item-skeleton';
 import '../skeleton-text/index';
-import styles from './accordion.scss';
+import styles from './accordion.scss?lit';
 
 /**
  * Skeleton of code snippet.
diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts
index bcac3b7aefe0..f4f43b99a797 100644
--- a/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts
+++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import { ACCORDION_SIZE, ACCORDION_ALIGNMENT } from './defs';
-import styles from './accordion.scss';
+import styles from './accordion.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { ACCORDION_SIZE, ACCORDION_ALIGNMENT };
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
index 56bf0d8886ab..248d072ad63d 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './breadcrumb.scss';
+import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
index 7c494c0fc5a1..0d0f2f0d4c54 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
+++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
@@ -10,7 +10,7 @@
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
 import CDSLink from '../link/link';
-import styles from './breadcrumb.scss';
+import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
index 7b4015b7b3d1..b5479589ae48 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
+++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { prefix } from '../../globals/settings';
 import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
 import CDSOverflowMenu from '../overflow-menu/overflow-menu';
-import styles from './breadcrumb.scss';
+import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
index d7568e8cb97e..60556a054e52 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './breadcrumb.scss';
+import styles from './breadcrumb.scss?lit';
 
 const renderItem = () => {
   return html`
diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
index 8bfc12eb976c..9828ef02e466 100644
--- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
+++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './breadcrumb.scss';
+import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/button/button-set.ts b/web-components/packages/carbon-web-components/src/components/button/button-set.ts
index b12565aa6494..bf032b2d6cad 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button-set.ts
+++ b/web-components/packages/carbon-web-components/src/components/button/button-set.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { BUTTON_KIND } from './defs';
-import styles from './button.scss';
+import styles from './button.scss?lit';
 import { prefix } from '../../globals/settings';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts b/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts
index 5a1c7a18ddd0..7f2a6aa09a4b 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts
@@ -12,7 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
 import CDSButton from './button';
-import styles from './button.scss';
+import styles from './button.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/button/button.ts b/web-components/packages/carbon-web-components/src/components/button/button.ts
index 276d7ce751a9..f3eb1853dd4f 100644
--- a/web-components/packages/carbon-web-components/src/components/button/button.ts
+++ b/web-components/packages/carbon-web-components/src/components/button/button.ts
@@ -299,7 +299,6 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
             </p>
           `
         : html`
-        <p>sss</p>
             <a
               id="button"
               part="button"
diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts
index 8a5d27a01a9e..9bcb321e13c3 100644
--- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './checkbox.scss';
+import styles from './checkbox.scss?lit';
 
 /**
  * Skeleton of number input.
diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts
index 7be15b608fc4..d4b8c834e4a9 100644
--- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts
+++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts
@@ -14,7 +14,7 @@ import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
-import styles from './checkbox.scss';
+import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
index 8e4b639463d6..56bbac6cd918 100644
--- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { CODE_SNIPPET_TYPE } from './code-snippet';
-import styles from './code-snippet.scss';
+import styles from './code-snippet.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
index 34a807728486..51c6f3f11790 100644
--- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
+++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
@@ -14,7 +14,7 @@ import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';
-import styles from './code-snippet.scss';
+import styles from './code-snippet.scss?lit';
 import Handle from '../../globals/internal/handle';
 import '../copy-button/index';
 import '../copy/copy';
diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
index 04b026be5041..f75b547ccaf9 100644
--- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
@@ -9,7 +9,7 @@
 
 import { prefix } from '../../globals/settings';
 import CDSDropdownItem from '../dropdown/dropdown-item';
-import styles from './combo-box.scss';
+import styles from './combo-box.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts
index f4995d67e0b8..9fc7c97d2bd9 100644
--- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts
+++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts
@@ -15,7 +15,7 @@ import { prefix } from '../../globals/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
 import CDSComboBoxItem from './combo-box-item';
-import styles from './combo-box.scss';
+import styles from './combo-box.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';
diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
index 58498e8199b9..60d3efc1bed0 100644
--- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
@@ -13,7 +13,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './content-switcher.scss';
+import styles from './content-switcher.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
index 329ea8f24962..6cdc5016aa0d 100644
--- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
+++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
@@ -13,7 +13,7 @@ import { prefix } from '../../globals/settings';
 import { forEach, indexOf } from '../../globals/internal/collection-helpers';
 import { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE } from './defs';
 import CDSContentSwitcherItem from './content-switcher-item';
-import styles from './content-switcher.scss';
+import styles from './content-switcher.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE };
diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts
index 29ece784bc29..33b11ceead41 100644
--- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts
@@ -12,7 +12,7 @@ import { property, customElement } from 'lit/decorators.js';
 import Copy16 from '@carbon/icons/lib/copy/16';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './copy-button.scss';
+import styles from './copy-button.scss?lit';
 import '../copy/copy';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/copy/copy.ts b/web-components/packages/carbon-web-components/src/components/copy/copy.ts
index bf47bfe566bc..6d5ab602c3d8 100644
--- a/web-components/packages/carbon-web-components/src/components/copy/copy.ts
+++ b/web-components/packages/carbon-web-components/src/components/copy/copy.ts
@@ -10,7 +10,7 @@
 import { html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from '../copy-button/copy-button.scss';
+import styles from '../copy-button/copy-button.scss?lit';
 import CDSIconButton from '../icon-button/icon-button';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
index 5e7c3946d5e9..d806ac38297a 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-body.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-body.ts
index 76f0f32c3e35..6af76bae1859 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-body.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-body.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSTableRow from './table-row';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-cell-content.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
index 8bed58086591..b1111e0ecf71 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 
 /**
  * Data table cell content.
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-cell.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-cell.ts
index 48ecf64128af..9c4e789bd4fb 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-cell.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-cell.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
index 2fb50a7c5202..4d5013ae5573 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 import HostListener from '../../globals/decorators/host-listener';
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-head.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-head.ts
index 2fb507f5531f..d938ccfd0b61 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-head.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-head.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
index 1931efbe5f41..a6de9f011254 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
@@ -18,7 +18,7 @@ import {
   TABLE_SORT_CYCLES,
   TABLE_SORT_DIRECTION,
 } from './defs';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TABLE_SORT_CYCLE, TABLE_SORT_CYCLES, TABLE_SORT_DIRECTION };
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-header-description.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-header-description.ts
index eca5de3845cb..0f87e985a21c 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-header-description.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-header-description.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 
 /**
  * Data table header description
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-header-title.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-header-title.ts
index 40a2474f2454..50091060d7a1 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-header-title.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-header-title.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 
 /**
  * Data table header title
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts
index 76880bc1d6d3..4aca14d30251 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-row.ts
@@ -13,7 +13,7 @@ import { prefix } from '../../globals/settings';
 import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-skeleton.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-skeleton.ts
index ea791a75d931..2f635e54201a 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-skeleton.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 
 /**
  * Data table skeleton
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
index 587c22fe4d7d..d9db5f1b18b8 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
index 2f7c04f9afc7..0d64aa0de5c6 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
@@ -15,7 +15,7 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { INPUT_SIZE } from '../text-input/text-input';
 import CDSSearch from '../search/search';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar.ts b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
index aa29751a79c4..59a72c9f234c 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { CDSTableToolbarContent } from '../..';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/data-table/table.ts b/web-components/packages/carbon-web-components/src/components/data-table/table.ts
index fa3095eae87b..150654641a81 100644
--- a/web-components/packages/carbon-web-components/src/components/data-table/table.ts
+++ b/web-components/packages/carbon-web-components/src/components/data-table/table.ts
@@ -12,7 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import { TABLE_SIZE, TABLE_SORT_DIRECTION } from './defs';
-import styles from './data-table.scss';
+import styles from './data-table.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 import HostListener from '../../globals/decorators/host-listener';
diff --git a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
index a23e8db4cc8c..109cee35432d 100644
--- a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { DATE_PICKER_INPUT_KIND } from './date-picker-input';
-import styles from './date-picker.scss';
+import styles from './date-picker.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
index a7a03fee9415..d5fb0df0d2dc 100644
--- a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
+++ b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
@@ -18,7 +18,7 @@ import { INPUT_SIZE } from '../text-input/text-input';
 import { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from './defs';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
 import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
-import styles from './date-picker.scss';
+import styles from './date-picker.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };
diff --git a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker.ts b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker.ts
index 1b7fd4caa3df..b739716b8bd4 100644
--- a/web-components/packages/carbon-web-components/src/components/date-picker/date-picker.ts
+++ b/web-components/packages/carbon-web-components/src/components/date-picker/date-picker.ts
@@ -31,7 +31,7 @@ import monthSelectPlugin from './month-select-plugin';
 import rangePlugin from './range-plugin';
 import shadowDOMEventPlugin from './shadow-dom-events-plugin';
 import stateHandshakePlugin from './state-handshake-plugin';
-import styles from './date-picker.scss';
+import styles from './date-picker.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
index 736770aabe30..5b4c33c6526e 100644
--- a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import Checkmark16 from '@carbon/icons/lib/checkmark/16';
 import { prefix } from '../../globals/settings';
 import { DROPDOWN_SIZE } from './dropdown';
-import styles from './dropdown.scss';
+import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
index 1b23876fa5de..a40fe4ac229a 100644
--- a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './dropdown.scss';
+import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts
index 224f38e287e2..ade3be4477e4 100644
--- a/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts
+++ b/web-components/packages/carbon-web-components/src/components/dropdown/dropdown.ts
@@ -33,7 +33,7 @@ import {
   NAVIGATION_DIRECTION,
 } from './defs';
 import CDSDropdownItem from './dropdown-item';
-import styles from './dropdown.scss';
+import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export {
diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts
index ae0d86726b90..4a109ae8bbfd 100644
--- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts
@@ -13,7 +13,7 @@ import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
-import styles from './file-uploader.scss';
+import styles from './file-uploader.scss?lit';
 import { BUTTON_KIND, BUTTON_SIZE } from '../button/defs';
 
 export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts
index 421723d74d1e..2352b9862361 100644
--- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts
+++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts
@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
-import styles from './file-uploader.scss';
+import styles from './file-uploader.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
index 2a3c7a92b9a3..5b0866da0752 100644
--- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
@@ -15,7 +15,7 @@ import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
 import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from '../loading/loading';
 import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';
-import styles from './file-uploader.scss';
+import styles from './file-uploader.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE };
diff --git a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
index 998c789d8601..436de0bf9069 100644
--- a/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
+++ b/web-components/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './file-uploader.scss';
+import styles from './file-uploader.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/form-group/form-group.ts b/web-components/packages/carbon-web-components/src/components/form-group/form-group.ts
index 77ae16529749..c555bcc2caf7 100644
--- a/web-components/packages/carbon-web-components/src/components/form-group/form-group.ts
+++ b/web-components/packages/carbon-web-components/src/components/form-group/form-group.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './form-group.scss';
+import styles from './form-group.scss?lit';
 
 /**
  * The shell UI for file uploader.
diff --git a/web-components/packages/carbon-web-components/src/components/form/form-item.ts b/web-components/packages/carbon-web-components/src/components/form/form-item.ts
index cbf51bfd9fd8..85d86aa74955 100644
--- a/web-components/packages/carbon-web-components/src/components/form/form-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/form/form-item.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './form-item.scss';
+import styles from './form-item.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/icon-button/icon-button.ts b/web-components/packages/carbon-web-components/src/components/icon-button/icon-button.ts
index 2e257a40ef95..1efae6500ac3 100644
--- a/web-components/packages/carbon-web-components/src/components/icon-button/icon-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/icon-button/icon-button.ts
@@ -14,7 +14,7 @@ import '../tooltip/index';
 import '../button/index';
 import CDSButton from '../button/button';
 import { ICON_BUTTON_SIZE, ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
-import styles from './icon-button.scss';
+import styles from './icon-button.scss?lit';
 
 export { ICON_BUTTON_SIZE, ICON_BUTTON_TOOLTIP_ALIGNMENT };
 
diff --git a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
index a0226b8f8170..bf6b6e9fc975 100644
--- a/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
+++ b/web-components/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
@@ -16,7 +16,7 @@ import { prefix } from '../../globals/settings';
 import LOADING_TYPE from '../loading/types';
 import getLoadingIcon from '../loading/loading-icon';
 import { INLINE_LOADING_STATE } from './defs';
-import styles from './inline-loading.scss';
+import styles from './inline-loading.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { INLINE_LOADING_STATE };
diff --git a/web-components/packages/carbon-web-components/src/components/layer/layer-story.ts b/web-components/packages/carbon-web-components/src/components/layer/layer-story.ts
index 0f6bf3c580af..7bd115c39b1c 100644
--- a/web-components/packages/carbon-web-components/src/components/layer/layer-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/layer/layer-story.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { radios } from '@storybook/addon-knobs';
 import { prefix } from '../../globals/settings';
 import storyDocs from './layer-story.mdx';
-import styles from './layer-story.scss';
+import styles from './layer-story.scss?lit';
 import './index.ts';
 
 const levels = {
diff --git a/web-components/packages/carbon-web-components/src/components/layer/layer.ts b/web-components/packages/carbon-web-components/src/components/layer/layer.ts
index 7fbc3c8e6058..e5e945b4ef5d 100644
--- a/web-components/packages/carbon-web-components/src/components/layer/layer.ts
+++ b/web-components/packages/carbon-web-components/src/components/layer/layer.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './layer.scss';
+import styles from './layer.scss?lit';
 
 /**
  * Basic layer
diff --git a/web-components/packages/carbon-web-components/src/components/link/link.ts b/web-components/packages/carbon-web-components/src/components/link/link.ts
index 18b926b7f934..c2e4400a5e29 100644
--- a/web-components/packages/carbon-web-components/src/components/link/link.ts
+++ b/web-components/packages/carbon-web-components/src/components/link/link.ts
@@ -13,7 +13,7 @@ import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './link.scss';
+import styles from './link.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/list/list-item.ts b/web-components/packages/carbon-web-components/src/components/list/list-item.ts
index 72c0d08553d1..8f69872c8e04 100644
--- a/web-components/packages/carbon-web-components/src/components/list/list-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/list/list-item.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './list.scss';
+import styles from './list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/list/unordered-list.ts b/web-components/packages/carbon-web-components/src/components/list/unordered-list.ts
index 598abe1c492a..bac0469cf6a9 100644
--- a/web-components/packages/carbon-web-components/src/components/list/unordered-list.ts
+++ b/web-components/packages/carbon-web-components/src/components/list/unordered-list.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './list.scss';
+import styles from './list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/loading/loading.ts b/web-components/packages/carbon-web-components/src/components/loading/loading.ts
index 0d6fa0d269e9..6e048f66986a 100644
--- a/web-components/packages/carbon-web-components/src/components/loading/loading.ts
+++ b/web-components/packages/carbon-web-components/src/components/loading/loading.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from './defs';
 import getLoadingIcon from './loading-icon';
-import styles from './loading.scss';
+import styles from './loading.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts
index adb583312d2b..d90f8e8689d1 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-body-content.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 
 /**
  * Modal body content
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts
index 0189c90c758e..53ab3b27ef9d 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-body.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts
index 0122c6800b08..21d0bc96eb09 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-close-button.ts
@@ -13,7 +13,7 @@ import Close20 from '@carbon/icons/lib/close/20';
 import { prefix } from '../../globals/settings';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-footer-button.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
index 3e26edbe5cc9..73443a513a7a 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
@@ -10,7 +10,7 @@
 import { prefix } from '../../globals/settings';
 import CDSButton from '../button/button';
 import buttonStyles from '../button/button.scss';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts
index 62686b973b7d..43d11b1f5c19 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-footer.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts
index cc33a8731583..fd2ce3f75db4 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-header.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts
index f9426d92cb88..0d5803fa5f9b 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-heading.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts b/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts
index 284f5fe12b58..6a751d3b995a 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal-label.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/modal/modal.ts b/web-components/packages/carbon-web-components/src/components/modal/modal.ts
index d444e4c04c2d..5284e6b0edf9 100644
--- a/web-components/packages/carbon-web-components/src/components/modal/modal.ts
+++ b/web-components/packages/carbon-web-components/src/components/modal/modal.ts
@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { MODAL_SIZE } from './defs';
-import styles from './modal.scss';
+import styles from './modal.scss?lit';
 import { selectorTabbable } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts b/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
index de61a9c4e1ec..a666010c5b1e 100644
--- a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import CDSDropdownItem from '../dropdown/dropdown-item';
-import styles from './multi-select.scss';
+import styles from './multi-select.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select.ts b/web-components/packages/carbon-web-components/src/components/multi-select/multi-select.ts
index 0fec370f4b2d..ed164d24bd40 100644
--- a/web-components/packages/carbon-web-components/src/components/multi-select/multi-select.ts
+++ b/web-components/packages/carbon-web-components/src/components/multi-select/multi-select.ts
@@ -23,7 +23,7 @@ import CDSDropdown, {
 } from '../dropdown/dropdown';
 import { SELECTION_FEEDBACK_OPTION } from './defs';
 import CDSMultiSelectItem from './multi-select-item';
-import styles from './multi-select.scss';
+import styles from './multi-select.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export {
diff --git a/web-components/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts b/web-components/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts
index c099a1ba4fb2..2a91c662a731 100644
--- a/web-components/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts
@@ -10,7 +10,7 @@
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSButton from '../button/button';
-import styles from './actionable-notification.scss';
+import styles from './actionable-notification.scss?lit';
 
 /**
  * Actionable notification action button.
diff --git a/web-components/packages/carbon-web-components/src/components/notification/actionable-notification.ts b/web-components/packages/carbon-web-components/src/components/notification/actionable-notification.ts
index ad38f1b39001..a59a6af17381 100644
--- a/web-components/packages/carbon-web-components/src/components/notification/actionable-notification.ts
+++ b/web-components/packages/carbon-web-components/src/components/notification/actionable-notification.ts
@@ -17,7 +17,7 @@ import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';
 import CDSInlineNotification from './inline-notification';
-import styles from './actionable-notification.scss';
+import styles from './actionable-notification.scss?lit';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 
diff --git a/web-components/packages/carbon-web-components/src/components/notification/inline-notification.ts b/web-components/packages/carbon-web-components/src/components/notification/inline-notification.ts
index 353265617526..1fd20328a940 100644
--- a/web-components/packages/carbon-web-components/src/components/notification/inline-notification.ts
+++ b/web-components/packages/carbon-web-components/src/components/notification/inline-notification.ts
@@ -21,7 +21,7 @@ import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';
-import styles from './inline-notification.scss';
+import styles from './inline-notification.scss?lit';
 
 export { NOTIFICATION_KIND, NOTIFICATION_TYPE };
 
diff --git a/web-components/packages/carbon-web-components/src/components/notification/toast-notification.ts b/web-components/packages/carbon-web-components/src/components/notification/toast-notification.ts
index 66ad8ae7fba1..b91c20767d4a 100644
--- a/web-components/packages/carbon-web-components/src/components/notification/toast-notification.ts
+++ b/web-components/packages/carbon-web-components/src/components/notification/toast-notification.ts
@@ -13,7 +13,7 @@ import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { NOTIFICATION_TYPE } from './defs';
 import CDSInlineNotification from './inline-notification';
-import styles from './toast-notification.scss';
+import styles from './toast-notification.scss?lit';
 
 /**
  * Toast notification.
diff --git a/web-components/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts b/web-components/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
index 430c761b66db..4c94f0f3c224 100644
--- a/web-components/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './number-input.scss';
+import styles from './number-input.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/number-input/number-input.ts b/web-components/packages/carbon-web-components/src/components/number-input/number-input.ts
index e97b0cc0b5ee..1b040baf7364 100644
--- a/web-components/packages/carbon-web-components/src/components/number-input/number-input.ts
+++ b/web-components/packages/carbon-web-components/src/components/number-input/number-input.ts
@@ -17,7 +17,7 @@ import Add16 from '@carbon/icons/lib/add/16';
 import Subtract16 from '@carbon/icons/lib/subtract/16';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { NUMBER_INPUT_VALIDATION_STATUS } from './defs';
-import styles from './number-input.scss';
+import styles from './number-input.scss?lit';
 import CDSTextInput, { INPUT_SIZE } from '../text-input/text-input';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
index 6bd338dcfd92..1a57891a29d8 100644
--- a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
+++ b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
@@ -18,7 +18,7 @@ import CDSOverflowMenuItem from './overflow-menu-item';
 import HostListener from '../../globals/decorators/host-listener';
 import { indexOf } from '../../globals/internal/collection-helpers';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './overflow-menu.scss';
+import styles from './overflow-menu.scss?lit';
 
 /**
  * @param index The index
diff --git a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
index 4224f9e6da48..5f5d51e2ca94 100644
--- a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
@@ -13,7 +13,7 @@ import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import { OVERFLOW_MENU_SIZE } from './defs';
-import styles from './overflow-menu.scss';
+import styles from './overflow-menu.scss?lit';
 
 /**
  * Overflow menu item.
diff --git a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
index 67a024f95367..dcfa46905a4d 100644
--- a/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
+++ b/web-components/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
@@ -17,7 +17,7 @@ import { find } from '../../globals/internal/collection-helpers';
 import CDSFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
 import { OVERFLOW_MENU_SIZE } from './defs';
 import CDSOverflowMenuBody from './overflow-menu-body';
-import styles from './overflow-menu.scss';
+import styles from './overflow-menu.scss?lit';
 import CDSIconButton from '../icon-button/icon-button';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts b/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
index 496adf1ce002..04486044b6a0 100644
--- a/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
+++ b/web-components/packages/carbon-web-components/src/components/pagination/pagination.ts
@@ -15,7 +15,7 @@ import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import styles from './pagination.scss';
+import styles from './pagination.scss?lit';
 import { PAGINATION_SIZE } from './defs';
 import CDSSelect from '../select/select';
 import '../button/index';
diff --git a/web-components/packages/carbon-web-components/src/components/popover/popover-content.ts b/web-components/packages/carbon-web-components/src/components/popover/popover-content.ts
index 85fbed890a0e..5539af12e5a2 100644
--- a/web-components/packages/carbon-web-components/src/components/popover/popover-content.ts
+++ b/web-components/packages/carbon-web-components/src/components/popover/popover-content.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './popover.scss';
+import styles from './popover.scss?lit';
 
 /**
  * Popover.
diff --git a/web-components/packages/carbon-web-components/src/components/popover/popover-story.ts b/web-components/packages/carbon-web-components/src/components/popover/popover-story.ts
index dbe93d211aad..480ed8086332 100644
--- a/web-components/packages/carbon-web-components/src/components/popover/popover-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/popover/popover-story.ts
@@ -18,7 +18,7 @@ import { prefix } from '../../globals/settings';
 import Checkbox16 from '@carbon/icons/lib/checkbox/16';
 import Settings16 from '@carbon/icons/lib/settings/16';
 
-import styles from './popover-story.scss';
+import styles from './popover-story.scss?lit';
 
 const popoverAlignments = {
   [`top`]: POPOVER_ALIGNMENT.TOP,
diff --git a/web-components/packages/carbon-web-components/src/components/popover/popover.ts b/web-components/packages/carbon-web-components/src/components/popover/popover.ts
index 0c80b54425e4..760596732ba6 100644
--- a/web-components/packages/carbon-web-components/src/components/popover/popover.ts
+++ b/web-components/packages/carbon-web-components/src/components/popover/popover.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './popover.scss';
+import styles from './popover.scss?lit';
 import CDSPopoverContent from './popover-content';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts b/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts
index b4a7f19d6bb9..bfd756aec617 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts
+++ b/web-components/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts
@@ -18,7 +18,7 @@ import {
   PROGRESS_BAR_TYPE,
 } from './defs';
 import { prefix } from '../../globals/settings';
-import styles from './progress-bar.scss';
+import styles from './progress-bar.scss?lit';
 
 export { PROGRESS_BAR_SIZE, PROGRESS_BAR_STATUS, PROGRESS_BAR_TYPE };
 
diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
index 964422124e2d..635176c8888d 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import CDSProgressStepSkeleton from './progress-step-skeleton';
-import styles from './progress-indicator.scss';
+import styles from './progress-indicator.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
index 2cf86c3429f2..4199746c74c6 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
+++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import CDSProgressStep from './progress-step';
-import styles from './progress-indicator.scss';
+import styles from './progress-indicator.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
index da3514b1404b..ecf9fada3e8b 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './progress-indicator.scss';
+import styles from './progress-indicator.scss?lit';
 import CircleDash from '@carbon/icons/lib/circle-dash/16';
 import '../skeleton-text';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
index 449780f69a25..08e126e09652 100644
--- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
+++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
@@ -16,7 +16,7 @@ import Warning16 from '@carbon/icons/lib/warning/16';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { PROGRESS_STEP_STAT } from './defs';
-import styles from './progress-indicator.scss';
+import styles from './progress-indicator.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { PROGRESS_STEP_STAT };
diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
index 23ad339831e8..4257f5a7d2f6 100644
--- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
+++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
@@ -19,7 +19,7 @@ import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
 import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import CDSRadioButton from './radio-button';
-import styles from './radio-button.scss';
+import styles from './radio-button.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { RADIO_BUTTON_ORIENTATION };
diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
index ffb7856c42e0..8042039966b0 100644
--- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './radio-button.scss';
+import styles from './radio-button.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts
index 463007109447..edd483e5e7b9 100644
--- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts
@@ -20,7 +20,7 @@ import RadioGroupManager, {
   ManagedRadioButtonDelegate,
 } from '../../globals/internal/radio-group-manager';
 import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
-import styles from './radio-button.scss';
+import styles from './radio-button.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { RADIO_BUTTON_LABEL_POSITION };
diff --git a/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts b/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts
index f93e6b722e3b..dcced40ad455 100644
--- a/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { INPUT_SIZE } from '../text-input/text-input';
-import styles from './search.scss';
+import styles from './search.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/search/search.ts b/web-components/packages/carbon-web-components/src/components/search/search.ts
index 3e80a43a504c..f2d871c80d0a 100644
--- a/web-components/packages/carbon-web-components/src/components/search/search.ts
+++ b/web-components/packages/carbon-web-components/src/components/search/search.ts
@@ -19,7 +19,7 @@ import FormMixin from '../../globals/mixins/form';
 import { INPUT_SIZE } from '../text-input/text-input';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import styles from './search.scss';
+import styles from './search.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/select/select-skeleton.ts b/web-components/packages/carbon-web-components/src/components/select/select-skeleton.ts
index 87f46db5764d..8f47e0263824 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/select/select-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './select.scss';
+import styles from './select.scss?lit';
 
 /**
  * Skeleton of number input.
diff --git a/web-components/packages/carbon-web-components/src/components/select/select.ts b/web-components/packages/carbon-web-components/src/components/select/select.ts
index 4e23654ba2c8..3bc40ee58cdd 100644
--- a/web-components/packages/carbon-web-components/src/components/select/select.ts
+++ b/web-components/packages/carbon-web-components/src/components/select/select.ts
@@ -18,7 +18,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import FormMixin from '../../globals/mixins/form';
 import { filter } from '../../globals/internal/collection-helpers';
 import { INPUT_SIZE } from '../text-input/text-input';
-import styles from './select.scss';
+import styles from './select.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
index 3460969eec1c..eadb84021b23 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './skeleton-placeholder.scss';
+import styles from './skeleton-placeholder.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
index a2f7b6ea57b5..a76ef5b8ac6b 100644
--- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
+++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
@@ -12,7 +12,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { SKELETON_TEXT_TYPE } from './defs';
-import styles from './skeleton-text.scss';
+import styles from './skeleton-text.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { SKELETON_TEXT_TYPE };
diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
index be303ec768a2..58484d45702a 100644
--- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import './skip-to-content';
-import styles from './skip-to-content-story.scss';
+import styles from './skip-to-content-story.scss?lit';
 import storyDocs from './skip-to-content-story.mdx';
 import { prefix } from '../../globals/settings';
 
diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts b/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts
index 4d9b934484a0..7b3be0951aab 100644
--- a/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts
+++ b/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts
@@ -15,7 +15,7 @@ import { prefix } from '../../globals/settings';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
 import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './slider.scss';
+import styles from './slider.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts b/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
index db7bfa9520a1..a023508b0ab5 100644
--- a/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './slider.scss';
+import styles from './slider.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider.ts b/web-components/packages/carbon-web-components/src/components/slider/slider.ts
index 07f0e360b902..59ab2507dfac 100644
--- a/web-components/packages/carbon-web-components/src/components/slider/slider.ts
+++ b/web-components/packages/carbon-web-components/src/components/slider/slider.ts
@@ -17,7 +17,7 @@ import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import CDSSliderInput from './slider-input';
-import styles from './slider.scss';
+import styles from './slider.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 interface Cancelable {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-action-button.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-action-button.ts
index f2507f2b0d33..6316f8686fe6 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-action-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug-action-button.ts
@@ -10,7 +10,7 @@
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSButton from '../button/button';
-import styles from './slug.scss';
+import styles from './slug.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts
index f82325b1a10c..a003c82b2cc5 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug-example-story.ts
@@ -16,7 +16,7 @@ import textNullable from '../../../.storybook/knob-text-nullable';
 import { prefix } from '../../globals/settings';
 import './index';
 import '../icon-button/index';
-import styles from './slug-story.scss';
+import styles from './slug-story.scss?lit';
 
 const items = [
   {
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts b/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts
index fd63f780a3e0..a0b2b4be0562 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug-story.ts
@@ -18,7 +18,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import './index';
 import '../icon-button/index';
-import styles from './slug-story.scss';
+import styles from './slug-story.scss?lit';
 
 import { POPOVER_ALIGNMENT } from '../popover/defs';
 import { SLUG_SIZE } from './defs';
diff --git a/web-components/packages/carbon-web-components/src/components/slug/slug.ts b/web-components/packages/carbon-web-components/src/components/slug/slug.ts
index 17a5a8400736..58f6b74fcfd3 100644
--- a/web-components/packages/carbon-web-components/src/components/slug/slug.ts
+++ b/web-components/packages/carbon-web-components/src/components/slug/slug.ts
@@ -12,7 +12,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSToggleTip from '../toggle-tip/toggletip';
-import styles from './slug.scss';
+import styles from './slug.scss?lit';
 import Undo16 from '@carbon/icons/lib/undo/16';
 import { SLUG_SIZE, SLUG_KIND, SLUG_DOT_TYPE } from './defs';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/web-components/packages/carbon-web-components/src/components/stack/stack.ts b/web-components/packages/carbon-web-components/src/components/stack/stack.ts
index 49c02962f18f..f371b3fc53e0 100644
--- a/web-components/packages/carbon-web-components/src/components/stack/stack.ts
+++ b/web-components/packages/carbon-web-components/src/components/stack/stack.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './stack.scss';
+import styles from './stack.scss?lit';
 import { STACK_ORIENTATION, SPACING_STEPS } from './defs';
 
 export { STACK_ORIENTATION, SPACING_STEPS };
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
index d08434690722..1b4a13a9769b 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 
 /**
  * Structured list body.
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
index d29000f9d20c..5ac277c91a03 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
index 8ec0921399cb..7807d5d64bd7 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 
 /**
  * Structured list header.
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
index af88f1e1b7b9..d9ea98481163 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
index 1f02b72597d9..754b2b360948 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
index b63abb16de3a..38bfb49d4c27 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 
 /**
  * Structured list header row.
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
index 813f52643fd6..572f42615a55 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
@@ -18,7 +18,7 @@ import RadioGroupManager, {
   NAVIGATION_DIRECTION,
   ManagedRadioButtonDelegate,
 } from '../../globals/internal/radio-group-manager';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts
index 5b2868e6cd98..f7805d3942e9 100644
--- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts
+++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts
@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import FocusMixin from '../../globals/mixins/focus';
 import CDSStructuredListRow from './structured-list-row';
-import styles from './structured-list.scss';
+import styles from './structured-list.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts b/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
index eccd93ac2765..3a6cb2124bcc 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './tabs.scss';
+import styles from './tabs.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tab.ts b/web-components/packages/carbon-web-components/src/components/tabs/tab.ts
index cbc38e8f24e5..7bc28ea14073 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tab.ts
+++ b/web-components/packages/carbon-web-components/src/components/tabs/tab.ts
@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSContentSwitcherItem from '../content-switcher/content-switcher-item';
 import { TABS_TYPE } from './tabs';
-import styles from './tabs.scss';
+import styles from './tabs.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
index b5f8ae7070e3..4c9588159d0a 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './tabs.scss';
+import styles from './tabs.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts
index aa28dcbaac23..ffef7f42bb12 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts
@@ -16,7 +16,7 @@ import { TABS_TYPE } from './tabs';
 import './tab';
 import './tabs-skeleton';
 import './tab-skeleton';
-import styles from './tabs-story.scss';
+import styles from './tabs-story.scss?lit';
 import storyDocs from './tabs-story.mdx';
 import { prefix } from '../../globals/settings';
 
diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs.ts
index 18320f948a7a..3cff56022703 100644
--- a/web-components/packages/carbon-web-components/src/components/tabs/tabs.ts
+++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs.ts
@@ -21,7 +21,7 @@ import CDSContentSwitcher, {
 } from '../content-switcher/content-switcher';
 import { TABS_KEYBOARD_ACTION, TABS_TYPE } from './defs';
 import CDSTab from './tab';
-import styles from './tabs.scss';
+import styles from './tabs.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { NAVIGATION_DIRECTION, TABS_KEYBOARD_ACTION, TABS_TYPE };
diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag.ts b/web-components/packages/carbon-web-components/src/components/tag/tag.ts
index a2c2ab6ed268..6f8736437a0d 100644
--- a/web-components/packages/carbon-web-components/src/components/tag/tag.ts
+++ b/web-components/packages/carbon-web-components/src/components/tag/tag.ts
@@ -15,7 +15,7 @@ import FocusMixin from '../../globals/mixins/focus';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TAG_SIZE, TAG_TYPE } from './defs';
-import styles from './tag.scss';
+import styles from './tag.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TAG_SIZE, TAG_TYPE };
diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts b/web-components/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts
index 820f0d74c236..ed427beb4811 100644
--- a/web-components/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './text-input.scss';
+import styles from './text-input.scss?lit';
 
 /**
  * Skeleton of number input.
diff --git a/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts b/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts
index 10daafba2d4b..71a29fb3acf9 100644
--- a/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts
+++ b/web-components/packages/carbon-web-components/src/components/text-input/text-input.ts
@@ -25,7 +25,7 @@ import {
   INPUT_TOOLTIP_DIRECTION,
   INPUT_TYPE,
 } from './defs';
-import styles from './text-input.scss';
+import styles from './text-input.scss?lit';
 
 export {
   INPUT_COLOR_SCHEME,
diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
index 504862bf1a2e..0dabb2bf760f 100644
--- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
+++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
-import styles from './textarea.scss';
+import styles from './textarea.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts
index 1baf8318f591..b488401963e2 100644
--- a/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts
+++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts
@@ -16,7 +16,7 @@ import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import CDSTextInput from '../text-input/text-input';
-import styles from './textarea.scss';
+import styles from './textarea.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts
index 125c4ee5abf7..8055ef51f7e4 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts
+++ b/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSLink from '../link/link';
 import { TILE_COLOR_SCHEME } from './defs';
-import styles from './tile.scss';
+import styles from './tile.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 // To Do: Replace with an an icon from `@carbon/icons`
diff --git a/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts
index 3bdc7ec58a3b..3901dfaf9d7d 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts
+++ b/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts
@@ -16,7 +16,7 @@ import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
-import styles from './tile.scss';
+import styles from './tile.scss?lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts
index 6ee91c6be3cc..7397ed95a1f3 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts
+++ b/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts
@@ -17,7 +17,7 @@ import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
-import styles from './tile.scss';
+import styles from './tile.scss?lit';
 import HostListener from '../../globals/decorators/host-listener';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts b/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts
index 7dfd480faa4f..554e347b6338 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts
+++ b/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts
@@ -13,7 +13,7 @@ import { prefix } from '../../globals/settings';
 import { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import styles from './tile.scss';
+import styles from './tile.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile.ts b/web-components/packages/carbon-web-components/src/components/tile/tile.ts
index f37665a106af..0534c131275b 100644
--- a/web-components/packages/carbon-web-components/src/components/tile/tile.ts
+++ b/web-components/packages/carbon-web-components/src/components/tile/tile.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { TILE_COLOR_SCHEME } from './defs';
-import styles from './tile.scss';
+import styles from './tile.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TILE_COLOR_SCHEME };
diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
index e46068e591dd..784b1165ee3f 100644
--- a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
+++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
@@ -16,7 +16,7 @@ import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
-import styles from './toggletip.scss';
+import styles from './toggletip.scss?lit';
 
 /**
  * Definition tooltip.
diff --git a/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts b/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts
index 0680e79b4c4b..6007985682fc 100644
--- a/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts
+++ b/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts
@@ -14,7 +14,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import CDSCheckbox from '../checkbox/checkbox';
 import { TOGGLE_SIZE } from './defs';
-import styles from './toggle.scss';
+import styles from './toggle.scss?lit';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts
index 674458546786..b6fad7841948 100644
--- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts
+++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts
@@ -10,7 +10,7 @@
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSPopoverContent from '../popover/popover-content';
-import styles from './tooltip.scss';
+import styles from './tooltip.scss?lit';
 
 /**
  * Tooltip content.
diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
index 50a20fa6163b..580662628047 100644
--- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
@@ -16,7 +16,7 @@ import './tooltip';
 import './tooltip-content';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
 import { prefix } from '../../globals/settings';
-import styles from './tooltip-story.scss';
+import styles from './tooltip-story.scss?lit';
 import storyDocs from './tooltip-story.mdx';
 import Information16 from '@carbon/icons/lib/information/16';
 
diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts
index 209aed622036..b9d6e641eadd 100644
--- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts
+++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts
@@ -14,7 +14,7 @@ import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import CDSPopover from '../popover/popover';
 import '../popover/popover-content';
-import styles from './tooltip.scss';
+import styles from './tooltip.scss?lit';
 import CDSTooltipContent from './tooltip-content';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
index 3f9184889e86..604181fcd0b9 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
@@ -12,7 +12,7 @@ import { property, customElement, query } from 'lit/decorators.js';
 import { BUTTON_TOOLTIP_POSITION } from '../button/button';
 import CDSButton from '../button/button';
 import HostListener from '../../globals/decorators/host-listener';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { prefix } from '../../globals/settings';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
index 1177e6dbb9ec..c732edf028c4 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
@@ -16,7 +16,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
index a89214d490eb..94ad206442b3 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
@@ -18,7 +18,7 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
 import CDSHeaderMenuItem from './header-menu-item';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts
index 3cf543c2dea6..ba5109a338fb 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts
@@ -12,7 +12,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
index 25d050c3e3d7..a31c034acb55 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
@@ -13,7 +13,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
index b4bea5679a95..1b1f728f3a60 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
@@ -11,7 +11,7 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 
 /**
  * Header.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
index 9f4f64571f2e..340d71fdec0c 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { prefix } from '../../globals/settings';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts
index cc57a28581a0..e1d31c7ef4a8 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 
 /**
  * Header Side Nav Items section
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts
index d5abe541cf01..f9b979b0b2bb 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 
 /**
  * Header.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
index 8a27e9aa383d..80306d13fd04 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
@@ -10,7 +10,7 @@
 import { LitElement } from 'lit';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 
 /**
  * A divider in side nav.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
index b0f08dab1d81..3c750a93f9dc 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 
 /**
  * Side nav items.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
index b6895b0ee2df..3a319972c30c 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
@@ -13,7 +13,7 @@ import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
index b6c54bdd4266..240cbff70c62 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import CDSSideNavMenu from './side-nav-menu';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
index 979a1b5d7d19..48c2890058cc 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
@@ -13,7 +13,7 @@ import ChevronDown20 from '@carbon/icons/lib/chevron--down/20';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
index 56007228fad3..9451bcc56630 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
@@ -19,7 +19,7 @@ import Handle from '../../globals/internal/handle';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';
 import CDSHeaderMenuButton from './header-menu-button';
 import CDSSideNavMenu from './side-nav-menu';
-import styles from './side-nav.scss';
+import styles from './side-nav.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts
index d04e6a55ea05..a5765673f4be 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts
@@ -10,7 +10,7 @@
 import { LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 
 /**
  * A divider in switcher.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts
index 00a58384ca1b..e7f8aff8b4a2 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts
@@ -12,7 +12,7 @@ import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 
 /**
  * Switcher menu item.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher.ts
index 30e2898dc301..6aad938919af 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/switcher.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/switcher.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
-import styles from './header.scss';
+import styles from './header.scss?lit';
 import { prefix } from '../../globals/settings';
 
 /**
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
index 02697439972f..09df097872a2 100644
--- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
+++ b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
@@ -22,7 +22,7 @@ import './index';
 import '../skip-to-content';
 import '../modal/modal';
 import '../button/button';
-import styles from './ui-shell-story.scss';
+import styles from './ui-shell-story.scss?lit';
 import storyDocs from './ui-shell-story.mdx';
 import { prefix } from '../../globals/settings';