有人遇到过 antd的css文件在webpack打包的时候报错吗

html-css06

有人遇到过 antd的css文件在webpack打包的时候报错吗,第1张

看情况

css文件大

这个时候是不合适的,编译后的文件太大,不利于缓存

css小,零碎

有时候我们要动态加载,而且要选择性的删除css样式,要灵活的调整css

我只想开发移动web页面,为什么要我安装react-native模块?

原因是antd-mobile被设计为同时支持React Native应用开发和Web应用开发,所有的组件都暴露为2个模块文件: index.js(React Native开发)和 index.web.js (Web开发)。

第1个方法:开发web应用时最好指定引用组件的js和样式:

再配合 babel-plugin-import 插件支持组件按需加载,设置如下:

这样会减少打包后文件的体积。

第2个方法:配合webpack的resolve中设定 extensions 选项的值,并将 .web.js 放在 .js 之前,这样就会优先找.web.js后缀的js:

github issue: https://github.com/ant-design/ant-design-mobile/issues/66

明明webpack配置里已经使用了css-loader,为什么还是报错?

原来是在webpack loaders 配置的时候需要把 css 和 cssmodules 分开处理,并加上 exclude or include, 不去处理 antd-mobile引用的样式 。

1.准备:npm安装以下组件a.安装react/antd:npminstallreactreact-domantd--saveb.安装webpack/less:npminstallwebpackless--save-devwebpack根据需要选择使用-g安装c.安装babel-loader以及其他相关package:npminstallbabel-loaderbabel-corebabel-preset-es2015babel-preset-react--save-devd.选择安装style-loader/css-loadernpminstallstyle-loadercss-loader--save-dev2.配置webpack.config.js具体配置可以查看webpack提供的例子,主要依赖的是babel-loaderbabel-loader上也有webpack.config.js应该如何编写的例子,传送门:babel-loader3.编写我们的文件(例如:demo-antd.jsx)只使用了antd提供的Button组件。只使用了antd提供的Button组件。ps:对比import{Button}from'antd'和importButtonfrom'antd/lib/button'后者不会将antd中所有的内容都引入,如果你只是需要Button这么一种组件的话,推荐使用后一种写法。4.执行构建webpack./demo-antd.jsxdemo-antd-bundle.js将生成demo-antd-bundle.js文件5.在页面中引入bundle文件(demo-antd-bundle.js)执行到这一步,在浏览器中查看页面可以应该可以看到一个原生样式的button元素,因为antd并没有将样式使用内联style的方式写入js文件中。这里我们暂时将问题一搁置,来看看问题二:组件库的内部机制。因为没有深入去看过antd的源代码,没法详细说明antd的在代码编写上的一些.怎么说,就是『代码为什么这样写』这个问题,有兴趣的话,可以去查看源码,正如@陈吉浩所说,查看github上的代码比npm下载后的代码更舒服。