diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index fc6a0ce1..e7805416 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -37,7 +37,7 @@ defineProps({
   loading: { type: Boolean, default: false },
 });
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .icon {
   width: 16px;
   height: 16px;
diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index 23b35719..906251cd 100644
--- a/src/layout/Index.vue
+++ b/src/layout/Index.vue
@@ -24,10 +24,11 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { AppMain, SideBar, NavBar } from "./components";
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .app-wrapper {
   height: 100%;
 }
+
 .main-container {
   flex-grow: 2;
   height: 100%;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 31da52ca..e7afe788 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -129,7 +129,7 @@ const filterMenus = (menus: any[]) => {
 };
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .side-bar {
   position: relative;
   height: 100%;