You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
目前在codesandbox中引入formily/antd组件后,无法正常运行,在社区中交流可能会无法马上给出一个可复现的直观的demo。本质原因不在formily这边,但是可能可以做一些处理。因技术水平有限,斗胆胡说一下。
codesandbox地址:
https://codesandbox.io/s/admiring-hodgkin-m6h85z?file=/src/App.js
步骤:
![image](https://private-user-images.githubusercontent.com/69338208/248539961-04d331eb-10a0-4bed-bf53-98a94dd4dae1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MjQ2MTIsIm5iZiI6MTcxOTYyNDMxMiwicGF0aCI6Ii82OTMzODIwOC8yNDg1Mzk5NjEtMDRkMzMxZWItMTBhMC00YmVkLWJmNTMtOThhOTRkZDRkYWUxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDAxMjUxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTllZWFlNzA2NWE5YTA4NWYyNWRlZjViMTc1ZjZjNDBlMTBjYWQ3MjhhYWJkYTU1NjNiZGJhMTdmMTU5OTNjYWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Xyb49cTXsDF_Ra3KnIPyIteh2ZaVwPG3d6JuL0uFfhg)
![image](https://private-user-images.githubusercontent.com/69338208/248540053-8563d28b-c383-4afc-8fb7-9a788df49a0a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MjQ2MTIsIm5iZiI6MTcxOTYyNDMxMiwicGF0aCI6Ii82OTMzODIwOC8yNDg1NDAwNTMtODU2M2QyOGItYzM4My00YWZjLThmYjctOWE3ODhkZjQ5YTBhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDAxMjUxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE0MTYxNTc2MzNkNTYyMjc2MDJkMGIwMmQ0Nzg4OTY1MzBlYmYyNGUxYWU4MWU2NzRkMmI3MGU5ZGJiNjVmOGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lpe4MCvNsIfzOTnWdJnznEzJ4lcGEvYrEhC9PZU4R-Y)
![image](https://private-user-images.githubusercontent.com/69338208/248540137-42f29660-5171-4082-90f3-c110a33a61c4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MjQ2MTIsIm5iZiI6MTcxOTYyNDMxMiwicGF0aCI6Ii82OTMzODIwOC8yNDg1NDAxMzctNDJmMjk2NjAtNTE3MS00MDgyLTkwZjMtYzExMGEzM2E2MWM0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDAxMjUxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ5YmVjZjg3MGQ1ZGYxMmJmNjI0MDc3NzkyOTk4ZTA5ZmFhZmFhMTNlYjNlMTFmN2RkMDIyMmYxMTAwMjdiNDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.H8rpxP-afm2E2zTQNlOruLlYwZc9rWtJ-Q0v6uKhaZ4)
![image](https://private-user-images.githubusercontent.com/69338208/248540183-7b3c5f99-2811-47f9-8f05-6a226e0d14aa.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2MjQ2MTIsIm5iZiI6MTcxOTYyNDMxMiwicGF0aCI6Ii82OTMzODIwOC8yNDg1NDAxODMtN2IzYzVmOTktMjgxMS00N2Y5LThmMDUtNmEyMjZlMGQxNGFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDAxMjUxMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU1ZWQxMzgyZTdlZTkyNzY3N2E5MTkyZGQwNjg5ZDJiZTJhMjNjNTZjMWI5MGQ4OWRkOTYwNjA1NThmYTI1MTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rXfsKCwqGgx3qdul0Cv-o6S74QzjdeUg6C7UJNZAUzM)
1、formily/antd生成的包中,所有组件没有css文件,只有less文件,并且会调用antd的less文件。
2、antd组件中,有些less文件中的import的url是不带后缀的,但是生成的包中有css文件
3、在codesandbox中引入formily/antd组件库后,读取到less文件,会触发less-transpiler.worker.js的脚本执行。其中import-manage.js中loadFileCallback方法会读取less文件内容。但是遇到上面不带文件后缀的import,就会读不到文件的内容,从而抛出一个错误,并停止渲染
思考:
根本原因是codesandbox的less内容解析读不到依赖的less文件,可能是因为antd的引入不带后缀,所以脚本无法直接读取到对应的less文件导致后面的步骤被中断。但经过尝试,单独引入antd的组件是可以执行的,可能是因为antd在生成的包中有css文件,所以在codesandebox中,只引入antd的组件,不会触发less-transpiler.worker.js的执行,也就可以正常渲染页面。
是否可以在formily生成的包过程中也直接将less输出对应的css文件,或者在less中引入的时候引入的事css文件,而不是antd中的less文件。
Beta Was this translation helpful? Give feedback.
All reactions