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;,并且修改替换使用的变量名

这样问题就解决了

相关推荐
layman05287 分钟前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔9 分钟前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李9 分钟前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN11 分钟前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒13 分钟前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库16 分钟前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
方也_arkling22 分钟前
Element Plus主题色定制
javascript·sass
电商API_1800790524724 分钟前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌26 分钟前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
Up九五小庞1 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源