src/assets/css/common.scss

@@ -102,29 +102,4 @@ $font-secondary-color: #9E9E9E;
     width: 23px;
     height: 23px;
   }
-}
-
-.loading-mask {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  background-color: rgba(200, 200, 200, 0.2);
-}
-
-.fit-fullscreen {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
-
-.fit-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
 }

src/assets/css/fit-center.scss

@@ -0,0 +1,7 @@
+.fit-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

src/assets/css/fit-fullscreen.scss

@@ -0,0 +1,5 @@
+.fit-fullscreen {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}

src/assets/css/loading-mask.scss

@@ -0,0 +1,10 @@
+.loading-mask {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(200, 200, 200, 0.2);
+}

src/components/FitCenter.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@/assets/css/fit-center.scss'
 
 const FitCenter: React.FC<PropsWithChildren> = (props: PropsWithChildren) => {
     return (

src/components/FitFullScreen.tsx

@@ -1,3 +1,5 @@
+import '@/assets/css/fit-fullscreen.scss'
+
 interface FitFullscreenProps extends PropsWithChildren {
     zIndex?: number
     backgroundColor?: string

src/components/LoadingMask.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import FitFullScreen from '@/components/FitFullScreen.tsx'
 import { COLOR_FONT_MAIN } from '@/constants/Common.constants.ts'
+import '@/assets/css/loading-mask.scss'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (