小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
这两天在公司开发项目过程的时候，总遇到sass的问题，还一出现就是两个问题，头疼的了一天，最后终于解决了，所以分享给大家看看。希望大家下次遇到的时候也能解决。不要跟我一样，三个问题看了一天。真的是一杯茶，一个bug改一天。
第一个问题：报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。
今天的问题就分享到这里了，如果大家觉得有帮助的请给我点点赞呗，谢谢大家了。如果你也遇到一些问题无法解决的，也可以在下方评论写一下你的问题，人多力量大，说不定就帮你解决了。
