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

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

检查了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/

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

阅读 22.6k
5 个回答

我的已解决: 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)大功告成

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


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

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

以上是思路,


看看官方的说明:

deep selector

deep-selectors

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏