@import scss 官方已不推荐使用，修改为 @use

src/components/ErrorMessage/403.vue

@@ -15,5 +15,5 @@ const router = useRouter();
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/ErrorMessage/404.vue

@@ -15,5 +15,5 @@ const router = useRouter();
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/ErrorMessage/500.vue

@@ -15,5 +15,5 @@ const router = useRouter();
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/ImportExcel/index.vue

@@ -145,5 +145,5 @@ defineExpose({
 });
 </script>
 <style lang="scss" scoped>
-@import "./index.scss";
+@use "./index";
 </style>

src/components/Loading/index.vue

@@ -9,5 +9,5 @@
 <script setup lang="ts" name="Loading"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/SelectFilter/index.vue

@@ -106,5 +106,5 @@ const select = (item: SelectDataProps, option: OptionsProps) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/SelectIcon/index.vue

@@ -86,5 +86,5 @@ const iconsList = computed((): { [key: string]: any } => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/TreeFilter/index.vue

@@ -158,5 +158,5 @@ defineExpose({ treeData, treeAllData, treeRef });
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/components/WangEditor/index.vue

@@ -154,5 +154,5 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/LayoutClassic/index.vue

@@ -58,5 +58,5 @@ const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/LayoutColumns/index.vue

@@ -99,5 +99,5 @@ const changeSubMenu = (item: Menu.MenuOptions) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/LayoutTransverse/index.vue

@@ -57,5 +57,5 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/LayoutVertical/index.vue

@@ -52,5 +52,5 @@ const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/components/Footer/index.vue

@@ -5,5 +5,5 @@
 </template>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/components/Main/index.vue

@@ -84,5 +84,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/components/Tabs/components/MoreButton.vue

@@ -77,5 +77,5 @@ const closeAllTab = () => {
 </script>
 
 <style scoped lang="scss">
-@import "../index.scss";
+@use "../index";
 </style>

src/layouts/components/Tabs/index.vue

@@ -104,5 +104,5 @@ const tabRemove = (fullPath: TabPaneName) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/layouts/components/ThemeDrawer/index.vue

@@ -187,5 +187,5 @@ mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/batchImport/index.vue

@@ -35,5 +35,5 @@ const batchAdd = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/draggable/index.vue

@@ -33,5 +33,5 @@ let gridList = ref([
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/guide/index.vue

@@ -91,5 +91,5 @@ const driverObj = driver({
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/selectFilter/index.vue

@@ -87,5 +87,5 @@ const filterData = [
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/selectIcon/index.vue

@@ -18,5 +18,5 @@ const iconValue = ref("");
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/svgIcon/index.vue

@@ -31,5 +31,5 @@ import SvgIcon from "@/components/SvgIcon/index.vue";
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/treeFilter/index.vue

@@ -50,5 +50,5 @@ const changeTreeFilter1 = (val: string[]) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/uploadFile/index.vue

@@ -209,5 +209,5 @@ const submit = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/assembly/wangEditor/index.vue

@@ -34,5 +34,5 @@ const dialogVisible = ref(false);
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/auth/button/index.vue

@@ -42,5 +42,5 @@ const { BUTTONS } = useAuthButtons();
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/auth/menu/index.vue

@@ -26,5 +26,5 @@ const handleToLogin = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/dashboard/dataVisualize/index.vue

@@ -91,5 +91,5 @@ const tab = [
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/dataScreen/index.vue

@@ -162,5 +162,5 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss" scoped>
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/copyDirect/index.vue

@@ -18,5 +18,5 @@ const data = ref<string>("我是被复制的内容 🍒 🍉 🍊");
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/debounceDirect/index.vue

@@ -13,5 +13,5 @@ const debounceClick = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/dragDirect/index.vue

@@ -8,5 +8,5 @@
 <script setup lang="ts" name="dragDirect"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/longpressDirect/index.vue

@@ -13,5 +13,5 @@ const longpress = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/throttleDirect/index.vue

@@ -13,5 +13,5 @@ const throttleClick = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/directives/watermarkDirect/index.vue

@@ -7,5 +7,5 @@
 <script setup lang="ts" name="watermarkDirect"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/columnChart/index.vue

@@ -135,5 +135,5 @@ const option: ECOption = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/lineChart/index.vue

@@ -119,5 +119,5 @@ const option: ECOption = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/nestedChart/index.vue

@@ -93,5 +93,5 @@ const option: ECOption = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/pieChart/index.vue

@@ -64,5 +64,5 @@ const option: ECOption = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/radarChart/index.vue

@@ -52,5 +52,5 @@ const option: ECOption = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/echarts/waterChart/index.vue

@@ -294,5 +294,5 @@ const option = {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/form/basicForm/index.vue

@@ -67,5 +67,5 @@ const onSubmit = () => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/form/dynamicForm/index.vue

@@ -100,5 +100,5 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/form/proForm/index.vue

@@ -80,5 +80,5 @@ const options = ref({
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/form/validateForm/index.vue

@@ -119,5 +119,5 @@ const resetForm = (formEl: FormInstance | undefined) => {
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/home/index.vue

@@ -7,5 +7,5 @@
 <script setup lang="ts" name="home"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/link/bing/index.vue

@@ -7,5 +7,5 @@
 <script setup lang="ts" name="bing"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/link/docs/index.vue

@@ -7,5 +7,5 @@
 <script setup lang="ts" name="docs"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/link/gitee/index.vue

@@ -10,5 +10,5 @@
 <script setup lang="ts" name="gitee"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/link/github/index.vue

@@ -10,5 +10,5 @@
 <script setup lang="ts" name="github"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/link/juejin/index.vue

@@ -11,5 +11,5 @@
 <script setup lang="ts" name="juejin"></script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>

src/views/login/components/LoginForm.vue

@@ -122,5 +122,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-@import "../index.scss";
+@use "../index";
 </style>

src/views/login/index.vue

@@ -22,5 +22,10 @@ import SwitchDark from "@/components/SwitchDark/index.vue";
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
+
+// 全局样式生效
+// .login-box {
+//   background-color: $primary-color;
+// }
 </style>

src/views/menu/menu1/index.vue

@@ -11,5 +11,5 @@ const value = ref<string>("");
 </script>
 
 <style scoped lang="scss">
-@import "./index.scss";
+@use "./index";
 </style>