解决sass插件遇到的问题（坑）会不会成为前端的必备知识

第一个问题：报for division is deprecated and will be removed in Dart Sass 2.0.0.

bug重现
项目引用的是 node-sass 插件，然后创建了common.scss文件，用于定义css变量的，一切准备好了之后，运行项目之后就报以下的错误，不单单影响本地运行，还影响线上打包，所以必须解决。
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($grid-gutter, 3)
More info and automated migrator: https://sass-lang.com/d/slash-div
63 │     'md': $grid-gutter / 3,
   │           ^^^^^^^^^^^^^^^^
    node_modules/vuetify/src/styles/settings/_variables.scss 63:11  @import
    node_modules/vuetify/src/styles/settings/_index.sass 1:9        @import
    node_modules/vuetify/src/styles/styles.sass 2:9                 @import
    node_modules/vuetify/src/components/VIcon/_variables.scss 1:9   @import
    node_modules/vuetify/src/components/VIcon/VIcon.sass 2:9        root stylesheet
发现是版本的问题，所以我们只需要在package.json文件里修改"sass": "~1.32.6"即可。但是这里有一个小插曲，因为一开始我以为我装的是node-sass应该没问题，但是想法还是错了，最后还是重新装了sass。
    "sass": "~1.32.6"
第二个问题：报SassError: Undefined mixin.定位于@include XXXXXX
bug重现
vue cli3.0 的项目工程引用公共文件的混入样式，准备做主题切换的功能，在vue.config.js公共css属性之后，运行了报错：SassError: Undefined mixin.定位于@include XXXXXX；就是不生效
配置的代码：
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/mixin.scss";`
@include background-color('text-activeColor');
      Undefined mixin.
173 │         @include font_color('text-activeColor');
    │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
看了sass官网的配置说明，知道解决方法。旧版本sass 用data: @import "@/assets/css/mixin.scss";新版本sass 用prependData: @import "@/assets/css/mixin.scss";。而我上面刚刚把sass换成旧版本的，所以需要把prependData换成data
第三个问题：使用过/deep/深度选择器，不过vue编译报错
bug重现
开发项目时在改变饿了么组件样式时，使用/deep/样式穿透 压根不生效，而且终端还会报错，之前可是可以随便用/deep/的，一下子就给整懵逼了~。先来看看报错信息长啥样：
.van-tabs--line,
      Expected selector.
274 │   /deep/ .van-tabs__content.van-tabs__content--animated,
    │   ^
  stdin 274:3  root stylesheet
      in F:\web\project-a\src\views\RankingList.vue (line 274, column 3)
这个问题有两个解决方法，把/deep/换成这两个，第一个是：>>>。第二个是：::v-deep。但是需要注意的是，如果用的是>>>的话，也有可能会运行起来报错，解决不了问题，所以最好的解决方案是::v-deep。
今天的问题就分享到这里了，如果大家觉得有帮助的请给我点点赞呗，谢谢大家了。如果你也遇到一些问题无法解决的，也可以在下方评论写一下你的问题，人多力量大，说不定就帮你解决了。
  




    
 
   相关推荐
   
        程序员Sunday
       18小时前
 
      
    黑马前端导师，10年程序员：今天被约谈离职了
 hello，大家好，我是 Sunday。 熟悉我的小伙伴都知道，我现在就职于《黑马程序员济南校区》，岗位是《前端导师》。 前天的时候，我在B站发了被约谈的视频 ，没想到这么火，真的是好事不出门，坏事传
  1.2w
 
 
        掘金·金石计划
      
    提升页面加载速度：web worker 帮你搞定
 本文正在参加「金石计划」 早在 2012 年，我看过亚马逊出过这么一份研究：其中提到如果一旦页面加载速度下降一秒钟，每年就会损失 16 亿美元的销售额。 这让我想起很久之前看过谷歌官方有这么样的声明：
  4801
 
 
        linwu
      
 18小时前
 
        JavaScript
        Vue.js
      
    作为面试官，为什么我推荐微前端作为前端面试的亮点？
 为什么选择微前端作为项目亮点 作为面试官，我经常听到很多候选人说在公司做的项目很简单，平常就是堆页面，写管理端，写H5,没有任何亮点，我以我一次面试候选人的经历分享给大家 面试官：你为什么选择用微前端
  1996
 




    
 
        简单不容易
        Vue.js
        reCAPTCHA
      
    在vue3中使用reCAPTCHA(机器人验证服务)
 什么是 reCAPTCHA reCAPTCHA 是 Google 提供的一项免费服务，可保护您的网站免受垃圾内容和滥用行为的侵扰。它使用高级风险分析技术来区分真人与机器人。开发者指南请参阅官网。 用法
  196
 
 
        React.js
      
    面试官您好，这是我写的TodoList
 前段时间看到掘金上有人二面被面试官要求写一个TodoList，今天趁着上班没啥事情，我也来写一个小Demo玩玩。 功能 一个TodoList大致就是长成这个样子，有一个输入框，可以通过输入任务名称进行
  234
 
 
        ssh_晨曦时梦见兮
      
 11小时前
 
        JavaScript
      
    React 核心 Dan 面试的时候，差点没写出来居中……？
 大家好，我是 ssh，曾经，大名鼎鼎的 React 核心开发者 Dan Abramov 接受了 up 主 Ben Awad 的一场面试，而且是正儿八经做题的那种。我们赶快一起来看看。 刚开场，Dan 
  1441
 
 
        zxg_神说要有光
      
 11小时前
 
        React.js
        JavaScript
      
    让你 React 组件水平暴增的 5 个技巧
 最近看了一些 Ant Design 的组件源码，学到一些很实用的技巧，这篇文章来分享一下。 首先，我们用 create-react-app 创建个 React 项目（选择 typescript 模版）
  1347
 
 
        Spirited_Away
        Vue.js
      
    入职之前，狂补技术，4w字的前端技术解决方案送给你（vue3 + vite ）
 大多企业都是7月入职很多应届生，vue也是国内大多是公司首选的技术栈，下面就带你了解一下一些技术的实现，所以该文章每个技术实现都有对应的代码案例。
  6799
 




    
 
        JavaScript
      
    拥抱AI ，前端无限可能--奇舞团12周岁生日快乐🎂
 在一个充满激情和创造力的下午，奇舞团迎来了自己的 12 周年庆典活动。这是一个值得纪念的时刻，我们聚集在一起，回顾过去的成就，展望未来的发展。奇舞团的成绩离不开每一位团队成员的辛勤付出和无限创造力。 
  428
 
 
        Story
        Chrome
      
    用performance分析网页的渲染，我悟了！
 一、写在前面 我发现即便工作很久了，我还是不会用performance性能分析工具，可能很多小伙伴跟我有一样的问题！ 于是我怒学了一通performance性能工具的使用，想写一篇如何使用perfor
  464
 
 
      
    【法医奇遇记】法医破案之HTTP协议状态码探秘
 法医收到一封神秘的邮件，一个名叫网络乐园的虚拟世界中，发生了一系列神秘的事件。法医被派往调查此案，如何破解这个谜题成为了他的挑战，而这一切都与HTTP协议的状态码有关
  4.3w
 
 
      
 13小时前
 
        WebAssembly
      
    WebAssembly能否取代Docker?
 “如果WebAssembly（Wasm）在几年前出现，Docker可能就不会出现了。因为它是一项非常强大的跨平台技术，可以让我们使用不同的编程语言来编写跨平台应用程序。
  1034
 
 
      
 14小时前
 
        Web Components
      
    💬 听了稀土开发者大会，Get到了新知识点：web components
 在6.30日的稀土开发者大会中，有位讲师分享内容是`Quark c`跨框架、跨端组件构建工具。底层基于浏览器原生 API: `Web components`。之前我没有听过这个概念，第一次听到瞬间眼前
  963
 




    
 
        古茗前端团队
      
 18小时前
 
        Electron
      
    如何优化 electron 应用在低配电脑秒启动
 古茗门店使用的收银机，有些会因为使用年限长、装了杀毒软件、配置低等原因性能较差，导致进钱宝启动响应较慢。然后店员在双击进钱宝图标后，发现没反应，就会重复点击。因此我们希望优化到即使在这些性能不太好的
  896
 
 
        叫叫技术团队
      
 13小时前
 
        掘金技术征文
      
    如何在企业内部搭建低代码平台
 低代码平台在每一个细分的业务领域都可以发挥巨大的作用，不仅能够完成研发的提效，甚至能够完全颠覆现有的研发或产品生产协作流程。在线可视化制作或搭建在商业领域目前也是一个非常有前景的方向。
  580
 
 
      
    你还在为pc端适配而烦恼吗？相信我，看了之后就不烦恼了
 作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照`1920*1080`（16:9）的比例来给你提供设计稿的，导致你画页面的时候
  4.2w
 
 
        three.js
      
    因交友不慎，导致肝了一周的3D教室，利用3D建模结合Three.js的技术只为带你们梦回当年。逝世就逝世吧！
 因同学的一句怀念，导致肝了一周的3D教室，利用3D建模结合Three.js的技术只为带你们梦回当年。逝世就逝世吧！
  4.3w
 
 
        Element
      
    带你理解scoped、>>>、/deep/、::v-deep的原理
 平时开发项目我们在使用第三方插件时，必须使用element-ui的某些组件需要修改样式时，老是需要加上/deep/深度选择器，以前只是知道这样用，但是还不清楚他的原理。
  1.2w
 
 
        vue-router
      
    Vue-Router 动态路由（动态菜单）的开发规范
 动态路由（动态菜单）的开发规范 路由（router）的数据结构 上面是前端项目最基本的路由结构，而唯一缺点就是，路由完全写死的.
  8672
 
 
      
    嘿～同学，当年没写完的同学录我用代码帮你实现了，快来留下你的记录吧！
 我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛 人生嘛，终有留下遗憾的时刻。翻一下手上的手机或者回忆一下脑中的记忆，还有多少美好的记忆被保留了下来。也许只有那一本破破的同学录才是满满的回忆，
  3567
 
 
          
 
 
  
 
 友情链接：
 
        vue有scroll方法
        full electron configuration of iron fe
        js 连接ftp服务器
        js开发容器
        jquery的优点
        VIP.4 融会贯通
        前端工程师 @ 程序员直通车
      
   私信
   
         1,699