-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
webpack2 ant-design-mobile error #516
Comments
但是我在webpack1.x不用定义这个也可以运行哦, 但是到了webpack2.x就不行了哦。 |
都要设置的 |
好像在 webpack2.x 中 |
欢迎帮忙排查原因。另外可以改回使用 webpack1.x 。 |
@fengyun2 这个问题解决了吗 |
什么时候能兼容webpack2.X, 现在webpack 都出到2.3了。 |
懂了。除了官方提供的,其他的都是用户的问题 |
@timzaak 请谅解,我们人力和精力有限,上面我发你的issue的方案你可以试试。等roadhug升级到webpack2,我会给出官方的webpack2 demo。 |
基本上所有网上能搜到的方法,都尝试了。都报错。。报错内容也都是react-native找不到。 为什么执着于webpack2.x 主要是因为github上最火的两个react手脚架react-boilerplate,react-starter-kit 都是webpack2.x。 |
看起来你们用的是 |
npm install --verbose --registry=https://registry.npm.taobao.org |
@timzaak 2.x使用这样的方式,我是这么解决的, 配置里
|
@deot O(∩_∩)O谢谢。 完美解决react-native引入问题。但是还有less样式以及icon的问题。
less问题,目前解决的不够优雅,期待有更好的方案:
引入:
PS: 不需要引入babel-plugin-import |
@timzaak 要引入官方的样式可以不用你这个方式,这是引入antd-mobile的样式,这样你就可以相当的优雅了
我项目是用sass的,不过同样可以帮到你 |
我使用的webpack2.0,我按照下面的设置还是不行。。 还是提示Error: Cannot find module 'antd-mobile/lib/button/style/css' 我引用的方式是import { Button} from 'antd-mobile'; |
官方的没出就再等等 可以先参考下我的脚手架 https://github.com/bccsafe/typescript-react-redux-antd-mobile
|
@deot 尝试后,发现不行。报错 ERROR in ./~/normalize.css/normalize.css 将 @gooddaddy 你可以参考下:http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c 这是我copy react-boilerplate项目配置,并根据自己需求改的。 另外,我发现你引入了整个ant_design_mobile,如果这样的话,我觉得你可以尝试通过index.html直接引入ant_design_mobile 压缩好的文件。 至于 ['import', { libraryName: 'antd-mobile', style: 'css' }]。 这个在我的配置里没有用到。 |
@timzaak 我也不知道关于你的报错是怎么回事(我建议你多折腾一下,会舒服很多).... 后来我是在antd-mobile中使用下面这样的方式(因为发现我的页面本身需要这个东西,所以我做了一个处理)
|
@deot 遵照按需引入的话,必须在某一个地方声明要引入的文件。纵观所有的library下的 .web.js文件,都没有声明引入相应的less文件。 方案1,和按需引入理念冲突。但如果方案2所说的插件解决后,会很容易就过渡过去,也是目前我个人认为最节约时间的解决方案。 |
@timzaak 我刚才试了下你在oschina的项目,改写后毫无问题!!!! import { NavBar } from 'antd-mobile'
import { Icon } from 'antd-mobile'
// 引入`babel-plugin-import` 设置 `.babelrc` 我找到一个问题,希望对你有帮助吧 |
@deot 按需引用的原因是:压缩单个页面所需js资源大小,这对移动开发比较重要。目前我司要一个页面加载出来,需要下载接近1M大小的bundle.js。 特恐怖。 |
@timzaak 吓的我去检查了下代码;我确定我的项目没有引入全部资源,我觉得你可能少用了引入 {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
[
"import",
[
{
"libraryName": "antd",
"style": true
},
{
"libraryName": "antd-mobile",
"style": true
}
]
]
]
} 可以无视antd;我项目同时管理mobile和pc |
在 2017年4月12日,上午10:19,timzaak ***@***.***> 写道:
@deot <https://github.com/deot> 尝试后,发现不行。报错
ERROR in ./~/normalize.css/normalize.css
Module parse failed: /${project_path}/node_modules/normalize.css/normalize.css Unexpected token (13:5)
You may need an appropriate loader to handle this file type.
将 css|less改成 less。也还是不行。估计是因为我的是按需加载。导致只要项目中没引入的东西,就不会编译进去。
@gooddaddy <https://github.com/gooddaddy> 你可以参考下:http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c <http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c>
这是我copy react-boilerplate项目配置,并根据自己需求改的。
另外,我发现你引入了整个ant_design_mobile,如果这样的话,我觉得你可以尝试你可以通过index.html直接引入ant_design 压缩好的文件。
至于 ['import', { libraryName: 'antd-mobile', style: 'css' }]。 这个在我的配置里没有用到。
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub <#516 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANbJ1ThqgEUgjUOdZ3hLbPsS4c7M8Ohzks5rvDSjgaJpZM4KwbGo>.
我使用的最新的 react-start-kit脚手架,它使用的是webpack2.0,里面包含了服务器渲染,以及按需加载的模块分包处理,以及公共包的抽离等,我不知道是否那一项和 ant-mobile冲突了,我尝试过很多的方式,还是提示找不到css。我使用的方式:
import { Button } from 'antd-mobile’
报错:
Cannot find module 'antd-mobile/lib/button/style/css’
官方上说的方法都试过了,都是不行。
|
@deot 万分感谢!试了试,真的是按需加载。完美!! 最后总结一下:
具体配置可参照 https://git.oschina.net/timzaak/graphql-web-mobile-starter 项目。不过配置有点复杂,不推荐。 @gooddaddy 你的问题必须看到你完整的配置才可以往下走。 |
@timzaak 也可以在官方demo库里添加webpack2的demo https://github.com/ant-design/antd-mobile-samples |
Error: Cannot find module 'antd-mobile/lib/button/style/css' |
@xmchyabi 应该是没配置 webpack.resolve, 请看文档 https://mobile.ant.design/docs/react/introduce-cn#Web-使用方式 |
@paranoidjk 谢谢你的回复,#516呀,官网demo这些我都有尝试去弄了, |
需要注意三点:
webpack 的svg loader(用官网的说法:Antd-Mobile 所有图标都是用 svg,需要配置 svg-sprite-loader)
另外,最坑的是
|
@timzaak 能不能给个完整的配置create-react-app栗子??? |
我的样式都是px显示而不是rem,这个是什么原因导致的? |
@CocoChen917 https://github.com/ant-design/antd-mobile-samples 里面有啊 |
本地环境
"antd-mobile": "^0.9.8",
windows10
node: 7.0.0
chrome55
你做了什么?
.babelrc
你期待的结果是:
像官网一样正常显示
实际上的结果:
The text was updated successfully, but these errors were encountered: