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，后续再看。

（待续）

猜你喜欢