Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

今天写项目的时候碰到一个报错,在网上查找到了解决方法,这里备份一下。防止下次再次遇到

原文章链接:Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

报错内容如下:

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 1 @import "./src/styles/global.scss";

这是因为 @import 规则已被弃用,并将在Dart Sass 3.0.0中删除。

解决方法:

1.修改全局样式引入,将引用 @import 改成 @use,代码如下:

复制代码
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "./src/styles/global.scss" as *;`
      }
    }
  },

2.修改全局变量

$--color-primary: #409EFF; 修改为 $colorPrimary: #409EFF;,并且修改替换使用的变量名

这样问题就解决了

相关推荐
酸菜土狗3 分钟前
🔥 手写 Vue 自定义指令:实现内容区拖拽调整大小(超实用)
前端
ohyeah6 分钟前
深入理解 React Hooks:useState 与 useEffect 的核心原理与最佳实践
前端·react.js
Cache技术分享7 分钟前
275. Java Stream API - flatMap 操作:展开一对多的关系,拉平你的流!
前端·后端
apollo_qwe30 分钟前
前端缓存深度解析:从基础到进阶的实现方式与实践指南
前端
周星星日记38 分钟前
vue中hash模式和history模式的区别
前端·面试
Light6038 分钟前
Vue 高阶优化术:v-bind 与 v-on 的实战妙用与思维跃迁
前端·低代码·vue3·v-bind·组件封装·v-on·ai辅助开发
周星星日记39 分钟前
5.为什么vue中使用query可以保留参数
前端·vue.js
lebornjose39 分钟前
javascript - webgl中绑定(bind)缓冲区的逻辑是什么?
前端·webgl
瘦的可以下饭了44 分钟前
Day05- CSS 标准流、浮动、Flex布局
前端
前端无涯1 小时前
React中setState后获取更新后值的完整解决方案
前端·react.js