vue-cli3.0深度选择器/deep/编译报错

Question

vue-cli3.0搭建的项目，也没做太多webpack的自定义设置（基本保持原封不动），开发的时候发现一个问题，使用/deep/深度选择器的时候编译报错：

检查了vue-loader版本：15.7.1
webpack版本：^4.1.0 || ^5.0.0-0
vue-loader依赖的sass-loader版本：^6.0.7

对应官网查阅了很久也没发现问题在哪儿~

style中scoped和lang="scss"是肯定有的。

我本地三个项目，都无法正常编译/deep/

请问一下大家有遇到过这样的问题吗？

Answer 1

我的已解决： 1）npm install -D vue-loader;

2）  vue.config.js 中配置：（官网上参考的：https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7）
      chainWebpack: config => {
    config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
            // 修改它的选项...
            return options
        })
}

3）div /deep/ ...... (记得scoped)
4)大功告成

Answer 2

你把你的 AddFlow.vue 文件粘贴出来看看，特别是 500行上下 20行左右的

---

看到你的问题了，特地去看了下官方说明，问题的方向是

1. 这个问题是 webpack构建的时候，解析或者 loader 你的scss的时候，解析错误
2. 这个问题和你的样式预处理器有关系，比如 less，就是 less-loader，scss 可能是 sass-loader
3. 可以尝试修改 deep 为 ::
4. 可以尝试去看看对应loader/样式预处理器的文档，看看对方对于深度选择器的支持 是怎么样的

以上是思路，

---

看看官方的说明：

deep-selectors

Answer 3

我也遇到同样的问题，求解

Answer 4

为啥不在/deep/后加个空格试试？

Answer 5

解决了吗我拉的别人代码，也报这个问题，请问还有什么解决方案吗