vue项目引入外部less、scss

最新推荐文章于 2024-03-16 10:42:34 发布

原创最新推荐文章于 2024-03-16 10:42:34 发布 · 920 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mysql #数据库 #database

这段代码展示了如何在Vue项目中引入Less预处理器进行样式编写。导入了fullscreenDialog的Less文件，并定义了深色对话框头部、主体及标题的样式。还定制了.collapseCSS类和折叠面板头部的背景色。通过`::v-deep`深度选择器来穿透组件样式隔离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入less

<style lang="less" scoped>
// @import "../assets/styles/fullscreenDialog.less";
@import "~@/assets/styles/fullscreenDialog.less";
::v-deep .el-dialog__header {
    background-color: #048fd2;
}
::v-deep .el-dialog__body {
    padding: 10px 10px;
}
::v-deep .el-dialog__title {
    font-size: 25px;
    color: white;
}
.collapseCSS {
    font-size: 25px;
    padding: 0 1%;
}
.el-collapse-item /deep/ .el-collapse-item__header {
    background-color: #cdd3db;
    margin-bottom: 1%;
}
</style>