fix:修改sass运行警告问题

This commit is contained in:
limengnan 2025-11-10 10:59:46 +08:00
parent a80ddcd2eb
commit a79f0bd0d3
6 changed files with 40 additions and 24 deletions

View File

@ -126,6 +126,8 @@ function logout() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@use '@/styles/variables.module' as variables;
.horizontal-header { .horizontal-header {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;

View File

@ -41,3 +41,7 @@ const activeMenu = computed<string>(() => {
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<style lang="scss" scoped>
@use '@/styles/variables.module' as variables;
</style>

View File

@ -91,8 +91,8 @@ function toggleSideBar() {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/styles/mixin.scss'; @use '@/styles/mixin.scss' as mixin;
@import '@/styles/variables.module.scss'; @use '@/styles/variables.module.scss' as variables;
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;

View File

@ -1,7 +1,7 @@
@import 'src/styles/variables.module'; @use 'src/styles/variables.module' as variables;
@import 'src/styles/element-plus'; @use 'src/styles/element-plus' as element-plus;
@import './sidebar.scss'; @use './sidebar' as sidebar;
@import './tailwind.scss'; @use './tailwind' as tailwind;
html,body,#app{ html,body,#app{
height: 100%; height: 100%;

View File

@ -1,3 +1,5 @@
@use 'src/styles/variables.module' as variables;
svg { svg {
vertical-align: text-bottom !important; vertical-align: text-bottom !important;
} }
@ -5,14 +7,14 @@ svg {
.main-container { .main-container {
// min-height: 100%; // min-height: 100%;
transition: margin-left 0.28s; transition: margin-left 0.28s;
margin-left: $sideBarWidth; margin-left: variables.$sideBarWidth;
position: relative; position: relative;
} }
.sidebar-container { .sidebar-container {
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; width: variables.$sideBarWidth !important;
background-color: $menuBg; background-color: variables.$menuBg;
height: calc(100vh - 60px); height: calc(100vh - 60px);
padding-top: 15px; padding-top: 15px;
position: absolute; position: absolute;
@ -70,25 +72,25 @@ svg {
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
&:hover { &:hover {
color: $menuHover !important; color: variables.$menuHover !important;
} }
} }
// .is-active > .el-sub-menu__title { // .is-active > .el-sub-menu__title {
// color: $subMenuActiveText !important; // color: variables.$subMenuActiveText !important;
// } // }
& .nest-menu .el-sub-menu > .el-sub-menu__title, & .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item { & .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important; min-width: variables.$sideBarWidth !important;
background-color: $subMenuBg !important; background-color: variables.$subMenuBg !important;
&:hover { &:hover {
color: $subMenuHover !important; color: variables.$subMenuHover !important;
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
border-right: 3px solid $subMenuHover; border-right: 3px solid variables.$subMenuHover;
background: #e8f3ff !important; background: #e8f3ff !important;
} }
} }
@ -159,7 +161,7 @@ svg {
} }
.el-menu--collapse .el-menu .el-sub-menu { .el-menu--collapse .el-menu .el-sub-menu {
min-width: $sideBarWidth !important; min-width: variables.$sideBarWidth !important;
} }
// mobile responsive // mobile responsive
@ -170,14 +172,14 @@ svg {
.sidebar-container { .sidebar-container {
transition: transform 0.28s; transition: transform 0.28s;
width: $sideBarWidth !important; width: variables.$sideBarWidth !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none; pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0); transform: translate3d(- variables.$sideBarWidth, 0, 0);
} }
} }
} }
@ -206,8 +208,8 @@ svg {
.el-menu-item { .el-menu-item {
&:hover { &:hover {
background-color: #ffffff; background-color: #ffffff;
// you can use $subMenuHover // you can use variables.$subMenuHover
color: $menuHover !important; color: variables.$menuHover !important;
} }
} }

View File

@ -39,6 +39,14 @@ export default ({ mode }: ConfigEnv): UserConfig => {
alias: { alias: {
'@': path.resolve('./src') '@': path.resolve('./src')
} }
},
css: {
preprocessorOptions: {
scss: {
silenceDeprecations: ['legacy-js-api'],
api: 'modern-compiler' // 使用现代API
}
}
} }
}; };
}; };