本文已参与「新人创作礼」活动，一起开启掘金创作之路。
背景技术
- vue项目结合 element ui 使用。 但是element ui 的样式不一定符合我们的需求,这时我们就需要改变它的样式，通常会使用到deep深度作用选择器。
- 官网对于deep深度作用选择器的定义大概是：能够穿透并影响子组件的样式。
- vue-cli搭建的项目，经常会在开发的时候，发现使用/deep/深度作用选择器的时候引起编译报错的现象
- 通常需要检查vue-loader与vue-loader依赖的sass-loader版本
- 由于deep是vue-loader中的标准。并不是现行的 css标准。无论是 vue-cli2 中的static文件夹以及vue-cli3中的public文件夹都是仅仅执行了copy_webpack_plugin 所以两者中的css不能使用/deep/选择器。
- deep不可以嵌套使用。嵌套使用的话，内层的deep不会被正确打包
- 例如
& /deep/ .isModify{ & /deep/ .el-input__inner{ border-color: #f6dfd4; background-color: #fff4ef; color: #ff6000;; } }
- 比如 SASS这种预编译器会无法识别这种语法,从而导致编译失败
- 并且/deep/在某些时候会报错,::v-deep更保险并且编译速度更快。
Sass安装报错可采用降级方法
-
如若出现以下报错，可尝试变更
package.json文件中的"node-sass"为"sass": "^1.26.5" -
保持
"sass-loader": "^10.1.1"依赖或其他较新的版本 -
再进行npm install
使用深度编译器deep报错可采用替换方法
- vue使⽤scss的style scoped时,若使⽤/deep/或类似格式的深度选择器的时候可能会引起如下报错
解决方法
- 将
/deep/更改为::v-deep重启vue项目即可解决报错
