Sass的@import过期警告怎么处理？有什么坑？
Sass的@import过期警告怎么处理？有什么坑？
大风写全栈
发布于 2024-12-25 15:51:32
发布于 2024-12-25 15:51:32
代码可运行
文章被收录于专栏：锤子代码
运行总次数：0
代码可运行
之前不怎么用sass
如上，平时项目中基本是用原生css。
Sass用的少之又少，基本只在老项目中使用。
今天改个老项目，启动的时候控制台提示有警告。
本着有警告就处理的原则，没用过也得啃一下这块硬骨头。
警告信息如下：
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
2 │ @import './variables.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^大概意思就是，@import过期了，这个不能用了。
让我们换种方式，那果断就换。
官方提供的地址显示，从Sass 1.80.0开始弃用。
所以，方案有两个：1. 版本回退到1.80.0之前；2. 修改为新语法。
新语法的两种情况
新语法也很简单，就是把@import换成@use。
如果引用了里面的变量，就换成：
@use "./variables.scss" as variable;然后变量的地方增加命名空间前缀：
@each $key, $value in variable.$flex-ai {
.ai-#{$key} {
align-items: $value;
}
}如果没有引用变量，则可以直接修改为：
@use '@/assets/scss/index.scss';重启项目，就不会提示警告了。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2024-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
