yarn run build 编译失败

vueComponent / ant-design-vue-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)

https://pro.antdv.com

MIT License

10.69k stars 3.1k forks source link

Open XiaoHeitu opened 2 years ago

XiaoHeitu commented 2 years ago

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):

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

Lrz-git commented 2 years ago

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

XiaoHeitu commented 2 years ago

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

XiaoHeitu commented 2 years ago

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

skyw4code commented 2 years ago

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

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;
}

XiaoHeitu commented 2 years ago

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

opensmarty commented 1 year ago

$ 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')

按官方解决方法，已解决

kangning1206 commented 1 year ago

我的解决方式

文件地址是 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 似乎不符合本意；