关于sass新版本中,开始不再适用import方法的问题 在部分项目中sass在使用import方法的位置,将会显示报错,在有一些框架下,甚至会直接报错。
作者在将一个web项目包装到electron-vite的过程中,发现会直接报错。
第1种情况:按文件引入
原代码:
@import 'element-plus/dist/index.css';
@import './app.scss';
@import 'common/transition.scss';
@import './other.scss';
@import './element.scss';
@import './media/media.scss';
@import './waves.scss';
@import './dark.scss';
@import './iconfont/font_2298093_rnp72ifj3ba.scss';
@import './font-awesome/font-awesome.scss';
@import './vxeTable.scss';
更正后:
@use 'element-plus/dist/index.css';
第2种情况:按对象引入
原代码:
@import './index.scss';
/* 页面宽度小于576px
------------------------------- */
@media screen and (max-width: $xs) {
// MessageBox 弹框
.el-message-box {
width: 80% !important;
}
// 锁屏页
.layout-lock-screen-date-top {
display: none;
}
}
更正后:(注意同步更改引用位置)
@use './index.scss' as mediaCss;
/* 页面宽度小于576px
------------------------------- */
@media screen and (max-width: mediaCss.$xs) {//******此处必须同步更改
// MessageBox 弹框
.el-message-box {
width: 80% !important;
}
// 锁屏页
.layout-lock-screen-date-top {
display: none;
}
}