帮助中心/最新通知

质量为本、客户为根、勇于拼搏、务实创新

< 返回文章列表

【运维相关】Sass的@import过期警告怎么处理?有什么坑?

发表时间:2025-01-16 01:32:56 小编:主机乐-Yutio

之前不怎么用sass

如上,平时项目中基本是用原生css。

Sass用的少之又少,基本只在老项目中使用。

今天改个老项目,启动的时候控制台提示有警告。

本着有警告就处理的原则,没用过也得啃一下这块硬骨头。

警告信息如下:

代码语言:javascript
AI代码解释
复制
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/import2 │ @import './variables.scss';^^^^^^^^^^^^^^^^^^^^^^^^^^

大概意思就是,@import过期了,这个不能用了。

让我们换种方式,那果断就换。

官方提供的地址显示,从Sass 1.80.0开始弃用。

所以,方案有两个:1. 版本回退到1.80.0之前;2. 修改为新语法。

新语法的两种情况

新语法也很简单,就是把@import换成@use。

如果引用了里面的变量,就换成:

代码语言:javascript
AI代码解释
复制
@use "./variables.scss" as variable;

然后变量的地方增加命名空间前缀:

代码语言:javascript
AI代码解释
复制
@each $key, $value in variable.$flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

如果没有引用变量,则可以直接修改为:

代码语言:javascript
AI代码解释
复制
@use '@/assets/scss/index.scss';

重启项目,就不会提示警告了。


联系我们
返回顶部