diff --git a/ui/src/app/applications/components/application-conditions/application-conditions.tsx b/ui/src/app/applications/components/application-conditions/application-conditions.tsx
index d131e90701d3e..5c174caaa1425 100644
--- a/ui/src/app/applications/components/application-conditions/application-conditions.tsx
+++ b/ui/src/app/applications/components/application-conditions/application-conditions.tsx
@@ -4,7 +4,7 @@ import {Timestamp} from '../../../shared/components';
 import * as models from '../../../shared/models';
 import {getConditionCategory} from '../utils';
 
-require('./application-conditions.scss');
+import './application-conditions.scss';
 
 export const ApplicationConditions = ({conditions}: {conditions: models.ApplicationCondition[]}) => {
     return (
diff --git a/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx b/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
index 9f4a8e19eff31..f19761061aaa6 100644
--- a/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
+++ b/ui/src/app/applications/components/application-create-panel/application-create-panel.tsx
@@ -10,11 +10,10 @@ import {ApplicationRetryOptions} from '../application-retry-options/application-
 import {ApplicationSyncOptionsField} from '../application-sync-options/application-sync-options';
 import {RevisionFormField} from '../revision-form-field/revision-form-field';
 import {SetFinalizerOnApplication} from './set-finalizer-on-application';
+import './application-create-panel.scss';
 
 const jsonMergePatch = require('json-merge-patch');
 
-require('./application-create-panel.scss');
-
 const appTypes = new Array<{field: string; type: models.AppSourceType}>(
     {type: 'Helm', field: 'helm'},
     {type: 'Kustomize', field: 'kustomize'},
diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
index e4eca6c36700b..73542ca5bfa13 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
@@ -6,8 +6,7 @@ import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {ApplicationParameters} from '../application-parameters/application-parameters';
 import {RevisionMetadataRows} from './revision-metadata-rows';
-
-require('./application-deployment-history.scss');
+import './application-deployment-history.scss';
 
 export const ApplicationDeploymentHistory = ({
     app,
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
index 874b52d400540..930faff48e653 100644
--- a/ui/src/app/applications/components/application-details/application-details.tsx
+++ b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -29,7 +29,7 @@ import {ResourceStatus} from '../../../shared/models';
 import {ApplicationsDetailsAppDropdown} from './application-details-app-dropdown';
 import {useSidebarTarget} from '../../../sidebar/sidebar';
 
-require('./application-details.scss');
+import './application-details.scss';
 
 interface ApplicationDetailsState {
     page: number;
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.tsx b/ui/src/app/applications/components/application-node-info/application-node-info.tsx
index 5c9e8e28da775..2a3e3fe0ae25c 100644
--- a/ui/src/app/applications/components/application-node-info/application-node-info.tsx
+++ b/ui/src/app/applications/components/application-node-info/application-node-info.tsx
@@ -10,7 +10,7 @@ import {ResourceTreeNode} from '../application-resource-tree/application-resourc
 import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';
 import {ComparisonStatusIcon, formatCreationTimestamp, getPodStateReason, HealthStatusIcon} from '../utils';
 
-require('./application-node-info.scss');
+import './application-node-info.scss';
 
 export const ApplicationNodeInfo = (props: {
     application: models.Application;
diff --git a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
index 9235945afa3d6..b30600368f404 100644
--- a/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
+++ b/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx
@@ -9,7 +9,7 @@ import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import * as utils from '../utils';
 
-require('./application-operation-state.scss');
+import './application-operation-state.scss';
 
 interface Props {
     application: models.Application;
diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
index c6b250356bb56..07af871a44455 100644
--- a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
+++ b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -27,6 +27,7 @@ import {
 import {NodeUpdateAnimation} from './node-update-animation';
 import {PodGroup} from '../application-pod-view/pod-view';
 import {ArrowConnector} from './arrow-connector';
+import './application-resource-tree.scss';
 
 function treeNodeKey(node: NodeId & {uid?: string}) {
     return node.uid || nodeKey(node);
@@ -34,8 +35,6 @@ function treeNodeKey(node: NodeId & {uid?: string}) {
 
 const color = require('color');
 
-require('./application-resource-tree.scss');
-
 export interface ResourceTreeNode extends models.ResourceNode {
     status?: models.SyncStatusCode;
     health?: models.HealthStatus;
diff --git a/ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx b/ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx
index 3eeb6975f4d66..18eb941981a37 100644
--- a/ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx
+++ b/ui/src/app/applications/components/application-resources-diff/application-resources-diff.tsx
@@ -8,7 +8,7 @@ import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {IndividualDiffSection} from './individual-diff-section';
 
-require('./application-resources-diff.scss');
+import './application-resources-diff.scss';
 
 export interface ApplicationResourcesDiffProps {
     states: models.ResourceDiff[];
diff --git a/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx b/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx
index 1a3a876890045..7d82659cbfdc7 100644
--- a/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx
+++ b/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx
@@ -3,7 +3,7 @@ import {useState} from 'react';
 import {Diff, Hunk} from 'react-diff-view';
 import 'react-diff-view/style/index.css';
 
-require('./application-resources-diff.scss');
+import './application-resources-diff.scss';
 
 export interface IndividualDiffSectionProps {
     file: any;
diff --git a/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx b/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx
index 165c57e0714a7..48b72de19551e 100644
--- a/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx
+++ b/ui/src/app/applications/components/application-retry-options/application-retry-options.tsx
@@ -5,7 +5,7 @@ import {omit} from 'lodash-es';
 import {NumberField} from '../../../shared/components';
 import * as models from '../../../shared/models';
 
-require('./application-retry-options.scss');
+import './application-retry-options.scss';
 
 const durationRegex = /^([\d\.]+[HMS])+$/i;
 const durationRegexError = 'Should be 1h10m10s/10h10m/10m/10s';
diff --git a/ui/src/app/applications/components/application-retry-view/application-retry-view.tsx b/ui/src/app/applications/components/application-retry-view/application-retry-view.tsx
index 6fcd11e313522..a97d9d5b98609 100644
--- a/ui/src/app/applications/components/application-retry-view/application-retry-view.tsx
+++ b/ui/src/app/applications/components/application-retry-view/application-retry-view.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as models from '../../../shared/models';
 
-require('./application-retry-view.scss');
+import './application-retry-view.scss';
 
 function buildRetryOptionView(label: string, data: string | number) {
     const result = data || 'not installed';
diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
index d2d5646b0c751..c9f1af6a7869b 100644
--- a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
+++ b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -8,7 +8,7 @@ import {services} from '../../../shared/services';
 import {ApplicationSyncWindowStatusIcon, ComparisonStatusIcon, getAppOperationState, getConditionCategory, HealthStatusIcon, OperationState, syncStatusMessage} from '../utils';
 import {RevisionMetadataPanel} from './revision-metadata-panel';
 
-require('./application-status-panel.scss');
+import './application-status-panel.scss';
 
 interface Props {
     application: models.Application;
diff --git a/ui/src/app/applications/components/application-summary/application-summary.tsx b/ui/src/app/applications/components/application-summary/application-summary.tsx
index 1276ab1459344..24f0bd9c30779 100644
--- a/ui/src/app/applications/components/application-summary/application-summary.tsx
+++ b/ui/src/app/applications/components/application-summary/application-summary.tsx
@@ -28,7 +28,7 @@ import {Link} from 'react-router-dom';
 import {EditNotificationSubscriptions, useEditNotificationSubscriptions} from './edit-notification-subscriptions';
 import {EditAnnotations} from './edit-annotations';
 
-require('./application-summary.scss');
+import './application-summary.scss';
 
 function swap(array: any[], a: number, b: number) {
     array = array.slice();
diff --git a/ui/src/app/applications/components/application-summary/edit-notification-subscriptions.tsx b/ui/src/app/applications/components/application-summary/edit-notification-subscriptions.tsx
index 9de9c2aed2cd2..1d774cd9cd4df 100644
--- a/ui/src/app/applications/components/application-summary/edit-notification-subscriptions.tsx
+++ b/ui/src/app/applications/components/application-summary/edit-notification-subscriptions.tsx
@@ -6,7 +6,7 @@ import {services} from '../../../shared/services';
 
 import {ApplicationSummaryProps} from './application-summary';
 
-require('./edit-notification-subscriptions.scss');
+import './edit-notification-subscriptions.scss';
 
 export const NOTIFICATION_SUBSCRIPTION_ANNOTATION_PREFIX = 'notifications.argoproj.io/subscribe';
 
diff --git a/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx b/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx
index fe4a0ae08c3ad..538d74455fea0 100644
--- a/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx
+++ b/ui/src/app/applications/components/application-sync-options/application-sync-options.tsx
@@ -3,7 +3,7 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import * as ReactForm from 'react-form';
 
-require('./application-sync-options.scss');
+import './application-sync-options.scss';
 
 export const REPLACE_WARNING = `The resources will be synced using 'kubectl replace/create' command that is a potentially destructive action and might cause resources recreation.`;
 export const FORCE_WARNING = `The resources will be synced using '--force' that is a potentially destructive action and will immediately remove resources from the API and bypasses graceful deletion. Immediate deletion of some resources may result in inconsistency or data loss.`;
diff --git a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
index 49b490b74d510..cdbf6d3030084 100644
--- a/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
+++ b/ui/src/app/applications/components/application-sync-panel/application-sync-panel.tsx
@@ -10,7 +10,7 @@ import {ApplicationRetryOptions} from '../application-retry-options/application-
 import {ApplicationManualSyncFlags, ApplicationSyncOptions, FORCE_WARNING, SyncFlags, REPLACE_WARNING} from '../application-sync-options/application-sync-options';
 import {ComparisonStatusIcon, nodeKey} from '../utils';
 
-require('./application-sync-panel.scss');
+import './application-sync-panel.scss';
 
 export const ApplicationSyncPanel = ({application, selectedResource, hide}: {application: models.Application; selectedResource: string; hide: () => any}) => {
     const [form, setForm] = React.useState<FormApi>(null);
diff --git a/ui/src/app/applications/components/applications-list/applications-labels.tsx b/ui/src/app/applications/components/applications-list/applications-labels.tsx
index 80b7a9989dd12..523994f08a097 100644
--- a/ui/src/app/applications/components/applications-list/applications-labels.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-labels.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Tooltip} from 'argo-ui';
 import {Application} from '../../../shared/models';
 
-require('./applications-labels.scss');
+import './applications-labels.scss';
 
 export const ApplicationsLabels = ({app}: {app: Application}) => {
     const labels = (
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index b818efc571d24..bcb1436d4eb5e 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -22,8 +22,8 @@ import {ApplicationTiles} from './applications-tiles';
 import {ApplicationsRefreshPanel} from '../applications-refresh-panel/applications-refresh-panel';
 import {useSidebarTarget} from '../../../sidebar/sidebar';
 
-require('./applications-list.scss');
-require('./flex-top-bar.scss');
+import './applications-list.scss';
+import './flex-top-bar.scss';
 
 const EVENTS_BUFFER_TIMEOUT = 500;
 const WATCH_RETRY_TIMEOUT = 500;
diff --git a/ui/src/app/applications/components/applications-list/applications-source.tsx b/ui/src/app/applications/components/applications-list/applications-source.tsx
index a7bba5a66f48a..0a5fbe51f37c0 100644
--- a/ui/src/app/applications/components/applications-list/applications-source.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-source.tsx
@@ -2,7 +2,7 @@ import {Tooltip} from 'argo-ui';
 import * as React from 'react';
 import {ApplicationSource as ApplicationSourceType} from '../../../shared/models';
 
-require('./applications-source.scss');
+import './applications-source.scss';
 
 export const ApplicationsSource = ({source}: {source: ApplicationSourceType}) => {
     const sourceString = `${source.repoURL}/${source.path || source.chart}`;
diff --git a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
index 9d61598752084..c20b5612d121f 100644
--- a/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-status-bar.tsx
@@ -4,7 +4,7 @@ import {COLORS} from '../../../shared/components';
 import {Consumer} from '../../../shared/context';
 import * as models from '../../../shared/models';
 
-require('./applications-status-bar.scss');
+import './applications-status-bar.scss';
 
 export interface ApplicationsStatusBarProps {
     applications: models.Application[];
diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
index 22ecdc6796647..77135d5f6af3a 100644
--- a/ui/src/app/applications/components/applications-list/applications-table.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -10,7 +10,7 @@ import {OperationState} from '../utils';
 import {ApplicationsLabels} from './applications-labels';
 import {ApplicationsSource} from './applications-source';
 import {services} from '../../../shared/services';
-require('./applications-table.scss');
+import './applications-table.scss';
 
 export const ApplicationsTable = (props: {
     applications: models.Application[];
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
index 7ec5e8fbdf1cb..de212ebd20d3f 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -10,7 +10,7 @@ import * as AppUtils from '../utils';
 import {OperationState} from '../utils';
 import {services} from '../../../shared/services';
 
-require('./applications-tiles.scss');
+import './applications-tiles.scss';
 
 export interface ApplicationTilesProps {
     applications: models.Application[];
diff --git a/ui/src/app/user-info/components/user-info-overview/user-info-overview.tsx b/ui/src/app/user-info/components/user-info-overview/user-info-overview.tsx
index 708ffd12c91b2..148407f4f7b7b 100644
--- a/ui/src/app/user-info/components/user-info-overview/user-info-overview.tsx
+++ b/ui/src/app/user-info/components/user-info-overview/user-info-overview.tsx
@@ -8,7 +8,7 @@ import {DataLoader, ErrorNotification, Page, Spinner} from '../../../shared/comp
 import {AppContext} from '../../../shared/context';
 import {services} from '../../../shared/services';
 
-require('./user-info-overview.scss');
+import './user-info-overview.scss';
 
 export class UserInfoOverview extends React.Component<RouteComponentProps<any>, {connecting: boolean}> {
     public static contextTypes = {