feat: 引入 postcss-nested

package.json

@@ -79,6 +79,7 @@
     "plop": "^4.0.1",
     "postcss": "^8.4.41",
     "postcss-mobile-forever": "^4.1.5",
+    "postcss-nested": "^6.2.0",
     "sass": "^1.77.8",
     "simple-git-hooks": "^2.11.1",
     "stylelint": "^16.8.1",

plop-templates/component/index.hbs

@@ -12,6 +12,6 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

plop-templates/page/index.hbs

@@ -16,6 +16,6 @@ definePage({
   </PageLayout>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

postcss.config.js

@@ -1,5 +1,7 @@
 export default {
   plugins: {
+    'autoprefixer': {},
+    'postcss-nested': {},
     'postcss-mobile-forever': {
       viewportWidth: 375,
       maxDisplayWidth: 600,
@@ -8,6 +10,5 @@ export default {
         'van-popup',
       ],
     },
-    'autoprefixer': {},
   },
 }

src/App.vue

@@ -56,9 +56,9 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
   </Provider>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .app-setting {
-  --at-apply: text-white dark-text-dark bg-ui-primary;
+  --uno: text-white dark-text-dark bg-ui-primary;
 
   position: fixed;
   top: 70%;
@@ -108,7 +108,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
   transform: translateY(100%);
 }
 
-// 主内容区动画
+/* 主内容区动画 */
 .fade-enter-active {
   transition: 0.2s;
 }

src/assets/styles/globals.scss → src/assets/styles/globals.css

@@ -22,7 +22,7 @@ body {
   box-sizing: inherit;
 }
 
-// 全局样式
+/* 全局样式 */
 #app {
   overflow: hidden auto;
   font-size: 14px;

src/components/PageLayout/index.vue

@@ -225,7 +225,7 @@ function handleBackTopClick() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .navbar {
   position: fixed;
   top: 0;

src/main.ts

@@ -19,7 +19,7 @@ import 'virtual:svg-icons-register'
 import 'virtual:uno.css'
 
 // 全局样式
-import '@/assets/styles/globals.scss'
+import '@/assets/styles/globals.css'
 
 const app = createApp(App)
 

src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router/auto'
 import { routes } from 'vue-router/auto-routes'
 import path from 'path-browserify'
 import { useNProgress } from '@vueuse/integrations/useNProgress'
-import '@/assets/styles/nprogress.scss'
+import '@/assets/styles/nprogress.css'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 import useKeepAliveStore from '@/store/modules/keepAlive'

src/views/login.vue

@@ -65,7 +65,7 @@ function testAccount(account: string) {
   </PageLayout>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .svg {
   position: absolute;
   bottom: 0;