React+Antd遇到的坑
第一次尝试React+antd,发现果然不愧是传说中的坑货,一个又一个坑。必须要记录。
react + antd,都是最新版本,使用npm和yarn各种add,build,start
1. 资源文件,图片文件,路径在build之后会不能用
我们希望的是http://xxxxxxx/AAA/img/XX.png
但build之后给出的是http://xxxxxxx/static/media/XX.png
解决方案:
node_modules -> react-scripts -> config -> paths.js 第46行
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'./'
return ensureSlash(servedUrl, true);
}
图像的路径对应也要改成 <img src={require('./../img/logo.png')} alt=""/>,非得添加一个 “./”
2. 自定义css会造成antd的css不起作用
这个超级坑,也完全出乎我的意料,也不知道到底是react还是webpack还是antd的锅。都说react开发大坑无数,算是见识到了。
对付这个问题的中心思想是把自定义的css导入和antd的导入分开处理:
node_modules -> react-scripts -> config -> webpack.config.dev.js
这个是为dev环境设置:
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
//********** add ********/
plugins: [
[
"import",
{libraryName: "antd", style: 'css'}
]
]
//********** add ********/
},
这段我试过必须加,不加还不行。
然后
{
test: /\.css$/,
exclude:/src/,//********** add ********/
use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, ], },
//********** add ********/
{
//CSS处理
test: /\.css$/,
loader: "style-loader!css-loader?modules",
exclude: /node_modules/,
},
//********** add ********/
都是网络上寻找到然后试验成功,是不是有冗余我也不知道,没力气仔细试了,这玩意搞了我好久,精疲力尽。
这样dev环境下的css就显示正常了
然而build的webpack.config.prod.js还需要重新设置一次:
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
compact: true,
//********** add ********/
plugins: [
[
"import", {libraryName: "antd", style: 'css'}
]
]
},
},
没有进行css的分开处理,暂时没发现问题,等待进一步探索。
build之后,没有src和node_modules的区分,初步猜测也不需要再分开css,后续再看。
(待续)
最新文章
- pentaho cde 选择性的显示多列数据
- BZOJ-1705 Longge的问题 一维GCD SUM 乱搞+质因数分解+...
- Java UDP网络编程 - 最简单示例
- Java实现多线程邮件发送
- 使用Visio进行UML建模
- HDU 1269 迷宫城堡 (强连通分量,常规)
- poj 3260 The Fewest Coins
- 【多路复用】I/O多路复用
- tinyxml_settattr
- 专家解读Linux操作系统内核中的GCC特性
- Hadoop集群运行JNI程序
- do...while(0)神奇
- SQL点滴25—T-SQL面试语句,练练手
- MapReduce 矩阵相乘
- stop总结
- RGMII,MII,GMI接口
- Oracle数据库(3-7)
- Django安装遇到的问题
- testrem
- facebook api之基本概念(中文)