关于sass新版本中,开始不再适用import方法的问题

377 阅读1分钟

关于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;
	}
}