fix:修改sass运行警告问题
This commit is contained in:
parent
a80ddcd2eb
commit
a79f0bd0d3
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
|||||||
@ -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%;
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue
Block a user