imp: 使用 postcss 相关功能代替 scss 以提升编译速度

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",

postcss.config.mjs

@@ -2,5 +2,6 @@ export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-nested': {},
   },
 }

src/components/Menu.vue

@@ -147,6 +147,6 @@ const store = useStore()
 const route = useRoute()
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 
 </style>

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;

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 {

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);
 }

src/components/misc/PageMiscAdvancedSettings.vue

@@ -135,5 +135,5 @@ const submitGiveup = async () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="css">
 </style>

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;

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;

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;

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;

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;

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;

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; */
   }
 }
 

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; */
   }
 }
 

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;

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;

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;

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;
 

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;

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;

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;

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; */

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>

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'

src/styles/index.scss → 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;

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,15 +39,15 @@ export default defineConfig({
       },
       resolvers: [
         ElementPlusResolver({
-          importStyle: "sass",
+          importStyle: "css",
         }),
         IconsResolver(),
       ],
     }),
     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",