diff --git a/package-lock.json b/package-lock.json
index 8af0ff2f..7460deaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "eslint-plugin-vue": "^9.26.0",
         "iconify-icon": "^1.0.8",
         "postcss": "^8.4.38",
-        "sass": "^1.77.4",
+        "postcss-nested": "^6.0.1",
         "tailwindcss": "^3.4.4",
         "typescript": "^5.4.5",
         "unplugin-auto-import": "^0.17.6",
@@ -5201,7 +5201,9 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
       "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -6460,6 +6462,8 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz",
       "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
diff --git a/package.json b/package.json
index e4c331c9..0f381cdd 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "eslint-plugin-vue": "^9.26.0",
     "iconify-icon": "^1.0.8",
     "postcss": "^8.4.38",
-    "sass": "^1.77.4",
+    "postcss-nested": "^6.0.1",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5",
     "unplugin-auto-import": "^0.17.6",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index e99ebc2c..cc2d7067 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -2,5 +2,6 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-nested': {},
   },
 }
\ No newline at end of file
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 6bd0c69c..da7ca57b 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -147,6 +147,6 @@ const store = useStore()
 const route = useRoute()
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 
 </style>
\ No newline at end of file
diff --git a/src/components/PageAbout.vue b/src/components/PageAbout.vue
index 4f903c5e..549b047d 100644
--- a/src/components/PageAbout.vue
+++ b/src/components/PageAbout.vue
@@ -143,7 +143,7 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .img-box {
   height: 250px;
   margin-right: 3rem;
diff --git a/src/components/PageLog.vue b/src/components/PageLog.vue
index d10ff4fe..a1a17d6e 100644
--- a/src/components/PageLog.vue
+++ b/src/components/PageLog.vue
@@ -228,7 +228,7 @@ onBeforeUnmount(() => {
 }
 </style>
 
-<style lang="scss">
+<style lang="css">
 .el-table .warning-row {
   --el-table-tr-bg-color: var(--el-color-warning-light-8);
   &:hover {
diff --git a/src/components/customText/CustomTextBox.vue b/src/components/customText/CustomTextBox.vue
index 6cb19eb2..3c27c267 100644
--- a/src/components/customText/CustomTextBox.vue
+++ b/src/components/customText/CustomTextBox.vue
@@ -21,7 +21,7 @@ defineProps<{
 }>()
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .text-group-title {
   border-top: 1px solid var(--el-border-color);
 }
diff --git a/src/components/misc/PageMiscAdvancedSettings.vue b/src/components/misc/PageMiscAdvancedSettings.vue
index 0496ed38..272b0b58 100644
--- a/src/components/misc/PageMiscAdvancedSettings.vue
+++ b/src/components/misc/PageMiscAdvancedSettings.vue
@@ -135,5 +135,5 @@ const submitGiveup = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 </style>
\ No newline at end of file
diff --git a/src/components/misc/PageMiscBackup.vue b/src/components/misc/PageMiscBackup.vue
index 297ff56d..5997f5c8 100644
--- a/src/components/misc/PageMiscBackup.vue
+++ b/src/components/misc/PageMiscBackup.vue
@@ -403,7 +403,7 @@ onBeforeMount(async () => {
 })
 </script>
 
-<style lang="scss">
+<style lang="css">
 .backup-list {
   display: flex;
   flex-direction: column;
diff --git a/src/components/misc/PageMiscBanList.vue b/src/components/misc/PageMiscBanList.vue
index 507c25ff..95172dc7 100644
--- a/src/components/misc/PageMiscBanList.vue
+++ b/src/components/misc/PageMiscBanList.vue
@@ -339,7 +339,7 @@ onBeforeMount(async () => {
 }
 </style>
 
-<style lang="scss">
+<style lang="css">
 @media screen and (max-width: 700px) {
   .bak-item {
     flex-direction: column;
diff --git a/src/components/misc/PageMiscGroup.vue b/src/components/misc/PageMiscGroup.vue
index c1e9ab8c..70d09e07 100644
--- a/src/components/misc/PageMiscGroup.vue
+++ b/src/components/misc/PageMiscGroup.vue
@@ -275,7 +275,7 @@ onBeforeMount(async () => {
 })
 </script>
 
-<style lang="scss">
+<style lang="css">
 span.left {
   display: inline-block;
   min-width: 5rem;
diff --git a/src/components/misc/PageMiscSettings.vue b/src/components/misc/PageMiscSettings.vue
index 50bac16e..daa2bfb1 100644
--- a/src/components/misc/PageMiscSettings.vue
+++ b/src/components/misc/PageMiscSettings.vue
@@ -742,7 +742,7 @@ const mailTest = async () => {
 
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .about {
   background-color: #fff;
   padding: 2rem;
diff --git a/src/components/mod/PageCustomReply.vue b/src/components/mod/PageCustomReply.vue
index 3d2b6884..2b79ee7b 100644
--- a/src/components/mod/PageCustomReply.vue
+++ b/src/components/mod/PageCustomReply.vue
@@ -503,7 +503,7 @@ onBeforeUnmount(() => {
 }
 </style>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 @media screen and (max-width: 700px) {
   .bak-item {
     flex-direction: column;
diff --git a/src/components/mod/PageHelpDoc.vue b/src/components/mod/PageHelpDoc.vue
index 3020d7da..d1dd6b00 100644
--- a/src/components/mod/PageHelpDoc.vue
+++ b/src/components/mod/PageHelpDoc.vue
@@ -429,7 +429,7 @@ onBeforeMount(async () => {
 
 </script>
 
-<style lang="scss">
+<style lang="css">
 @media screen and (max-width: 700px) {
   .bak-item {
     flex-direction: column;
diff --git a/src/components/mod/PageJs.vue b/src/components/mod/PageJs.vue
index 0567f9d7..7de5a129 100644
--- a/src/components/mod/PageJs.vue
+++ b/src/components/mod/PageJs.vue
@@ -761,11 +761,11 @@ const jsUpdate = async () => {
 }
 </script>
 
-<style lang="scss">
+<style lang="css">
 .cm-editor {
   /* height: v-bind("$props.initHeight"); */
   height: 20rem;
-  // font-size: 18px;
+  /* font-size: 18px; */
 
   outline: 0 !important;
   /* height: 50rem; */
@@ -790,7 +790,7 @@ const jsUpdate = async () => {
 
   &>span {
     margin-right: 1rem;
-    // width: fit-content;
+    /* width: fit-content; */
   }
 }
 
diff --git a/src/components/mod/PageMiscDeck.vue b/src/components/mod/PageMiscDeck.vue
index 0b88ef9d..ec338765 100644
--- a/src/components/mod/PageMiscDeck.vue
+++ b/src/components/mod/PageMiscDeck.vue
@@ -259,7 +259,7 @@ const deckUpdate = async () => {
 
 </script>
 
-<style lang="scss">
+<style lang="css">
 @media screen and (max-width: 700px) {
   .bak-item {
     flex-direction: column;
@@ -302,7 +302,7 @@ const deckUpdate = async () => {
 
   &>span {
     margin-right: 1rem;
-    // width: fit-content;
+    /* width: fit-content; */
   }
 }
 
diff --git a/src/components/mod/PageStory.vue b/src/components/mod/PageStory.vue
index 95f3e561..3a14c13b 100644
--- a/src/components/mod/PageStory.vue
+++ b/src/components/mod/PageStory.vue
@@ -422,7 +422,7 @@ onBeforeMount(async () => {
     </el-tabs>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .pagination {
     margin-top: 10px;
     background-color: #f3f5f7;
diff --git a/src/components/mod/censor/CensorLog.vue b/src/components/mod/censor/CensorLog.vue
index a1a83693..337d3825 100644
--- a/src/components/mod/censor/CensorLog.vue
+++ b/src/components/mod/censor/CensorLog.vue
@@ -108,7 +108,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .censor-log-container {
   display: flex;
   flex-direction: column;
diff --git a/src/components/mod/story/StoryBackup.vue b/src/components/mod/story/StoryBackup.vue
index f042f94a..84ea1056 100644
--- a/src/components/mod/story/StoryBackup.vue
+++ b/src/components/mod/story/StoryBackup.vue
@@ -129,7 +129,7 @@ onBeforeMount(async () => {
 
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .backup-list {
   display: flex;
   flex-direction: column;
diff --git a/src/components/tool/PageResource.vue b/src/components/tool/PageResource.vue
index 15aeef80..2f8e8ee5 100644
--- a/src/components/tool/PageResource.vue
+++ b/src/components/tool/PageResource.vue
@@ -172,7 +172,7 @@ onBeforeMount(async () => {
   </el-drawer>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .helptips {
   background-color: #f3f5f7;
 
diff --git a/src/components/tool/PageTest.vue b/src/components/tool/PageTest.vue
index 7957fe8e..886bdefc 100644
--- a/src/components/tool/PageTest.vue
+++ b/src/components/tool/PageTest.vue
@@ -215,7 +215,7 @@ const reloadHelpdoc = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .about {
   background-color: #fff;
   padding: 2rem;
diff --git a/src/components/utils/custom-reply-condition.vue b/src/components/utils/custom-reply-condition.vue
index 3a5180d4..26ef877a 100644
--- a/src/components/utils/custom-reply-condition.vue
+++ b/src/components/utils/custom-reply-condition.vue
@@ -87,7 +87,7 @@ const deleteSelf = () => {
 
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 @media screen and (max-width: 700px) {
   .mobile-changeline {
     flex-direction: column;
diff --git a/src/components/utils/foldable-card.vue b/src/components/utils/foldable-card.vue
index 8e69f51a..e54512e0 100644
--- a/src/components/utils/foldable-card.vue
+++ b/src/components/utils/foldable-card.vue
@@ -136,7 +136,7 @@ defineExpose({open, close})
   </component>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .foldable-card {
   display: flex;
   flex-direction: column;
diff --git a/src/components/utils/nested.vue b/src/components/utils/nested.vue
index ed54d5bf..4cd28175 100644
--- a/src/components/utils/nested.vue
+++ b/src/components/utils/nested.vue
@@ -160,7 +160,7 @@ const removeItem = (v: any[], index: number | any) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 .dragArea {
   min-height: 50px;
   /* outline: 1px dashed; */
diff --git a/src/components/utils/resource-render.vue b/src/components/utils/resource-render.vue
index d2d6097e..eac486b1 100644
--- a/src/components/utils/resource-render.vue
+++ b/src/components/utils/resource-render.vue
@@ -57,5 +57,5 @@ const props = withDefaults(defineProps<{
   </template>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 </style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 82176dc3..8cf50255 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,10 +9,10 @@ import App from "./App.vue";
 
 // or use cdn, uncomment cdn link in `index.html`
 
-import "~/styles/index.scss";
+import "~/styles/index.css";
 
 // If you want to use ElMessage, import it.
-import "element-plus/theme-chalk/src/message.scss"
+// import "element-plus/theme-chalk/src/message.scss"
 import "element-plus/es/components/message-box/style/css"
 import "element-plus/es/components/dialog/style/css"
 import 'element-plus/theme-chalk/display.css'
diff --git a/src/styles/index.scss b/src/styles/index.css
similarity index 93%
rename from src/styles/index.scss
rename to src/styles/index.css
index cbc1944f..9eaeb514 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.css
@@ -44,9 +44,9 @@ p {
   @apply my-3;
 }
 
-// :root {
-//   --el-color-primary: red;
-// }
+/*:root {*/
+/*  --el-color-primary: red;*/
+/*}*/
 
 body {
   margin: 0;
@@ -81,13 +81,13 @@ code {
   }
   padding: 8px 16px;
   border-radius: 4px;
-  // border: 1px solid #dadada;
+  /*border: 1px solid #dadada;*/
   border-left: 3px solid var(--el-color-primary);
   margin: 0px 0;
 }
 
 
-// 弹窗优化
+/* 弹窗优化 */
 @media screen and (max-width: 750px) {
   .el-message-box {
     width: 80% !important;
diff --git a/vite.config.ts b/vite.config.ts
index 8ef897db..5256beda 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,13 +19,6 @@ export default defineConfig({
       "~/": `${pathSrc}/`,
     },
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "~/styles/element/index.scss" as *;`,
-      },
-    },
-  },
   server: {
     port: 3000,
   },
@@ -46,7 +39,7 @@ export default defineConfig({
       },
       resolvers: [
         ElementPlusResolver({
-          importStyle: "sass",
+          importStyle: "css",
         }),
         IconsResolver(),
       ],
@@ -54,7 +47,7 @@ export default defineConfig({
     Components({
       resolvers: [
         ElementPlusResolver({
-          importStyle: "sass",
+          importStyle: "css",
         }),
         IconsResolver(),
       ],
@@ -64,7 +57,7 @@ export default defineConfig({
       autoInstall: true,
     }),
     legacy({
-      targets: ["defaults", "not IE 11"],
+      targets: ["defaults"],
     }),
   ],
   build: {
@@ -76,10 +69,11 @@ export default defineConfig({
           base: ["vue", "pinia", "vue-router"],
           element: ["element-plus"],
           codemirror: ["codemirror", "@codemirror/lang-javascript"],
-          network: ["axios", "axios-retry"],
           utils: [
             "@vueuse/core",
             "asmcrypto.js",
+            "axios",
+            "axios-retry",
             "clipboard",
             "dayjs",
             "filesize",