ant-design-vue-pro

ant-design-vue-pro copied to clipboard

Describe the bug （描述 Bug）

直接克隆并编译。提示编译失败。

To Reproduce （重现步骤） Steps to reproduce the behavior:

1、git clone https://github.com/vueComponent/ant-design-vue-pro.git 2、cd ant-design-vue-pro 3、yarn install 4、yarn run build

Expected behavior（你期待的是什么?） A clear and concise description of what you expected to happen. 正常情况应该提示编译成功

Screenshots（截图） If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 16.04.7 LTS
• NodeJs: v16.14.2
• Yarn: 1.22.19
• @vue/cli: 5.0.4
• Browser 无
• Version lastest

Additional context（附加信息） 跟据网友提示，删除NumberInfo.vue 最后 sytle标签中的 scoped属性 可以正常编译。但不知道会不会引起样式污染。希望官方能尽快修复或提供官方的修复方案。

注释 @import 'index';也可以解决，不知道会不会有问题。

注释掉 @import 就表示不引入样式表。这样的话NumberInfo 的样式就没了。只删除scoped属性 至少样式还在。而且从样式命名来看被污染的几率也不大。所以在官方没公布修复方案之前，我们都暂时删除掉 scoped属性的。

@sendya 大神哥哥。这个问题可以处理一下吗？

总不能靠注释代码解决问题吧... - - !

index.less中

:global {
  .anticon-caret-up {
    color: @red-6;
  }
  .anticon-caret-down {
    color: @green-6;
  }
}

修改为：

::v-deep(.anticon-caret-up) {
  color: @red-6;
}

::v-deep(.anticon-caret-down) {
  color: @green-6;
}

并没有注释，只是把 :global {} 去掉了。去掉后，也不会污染其他CSS，或者被其他CSS污染。。。这两个类只会在 .sub-total 内部生效。

$ yarn run build yarn run v1.22.19 $ vue-cli-service build

| Building for production...

ERROR Failed to compile with 1 error 10:09:10

error in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=33b81dc6&prod&lang=less&scoped=true&

TypeError: Cannot set properties of undefined (setting 'parent')

按官方解决方法，已解决

我的解决方式

出问题文件

文件地址是 src/components/NumberInfo/index.less;

问题代码块

:global {
    .anticon-caret-up {
      color: @red-6;
    }
    .anticon-caret-down {
      color: @green-6;
    }
 }

原因

:global 块语法错误，可能是less版本问题；

修改用法

 :global(.anticon-caret-up) {
        color: @red-6;
      }
  :global(.anticon-caret-down) {
    color: @green-6;
  }

我对 :global 没有深入研究，但楼上用法 ::v-deep 似乎不符合本意；