Antd在create-react-app中对自定义主题的设置的问题

最新推荐文章于 2024-08-15 09:18:57 发布

Flasco

最新推荐文章于 2024-08-15 09:18:57 发布

阅读量5.2k

点赞数

分类专栏： react-js 文章标签： react-js ant-design

本文链接：https://blog.csdn.net/flasco/article/details/78428982

版权

react-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近笔者开始研究起了react.js。不得不说虽然语法和react-native差不多，但是redux，还是等等之类的东西接受起来还是有些挑战的.

今天笔者看起了react的ui库：antd，在碰到自定义主题的时候遇上了bug，按照教程一步步做下来却没有作用。下面附上官方doc中的有问题的地方。


  const { injectBabelPlugin } = require('react-app-rewired');
  const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
    - config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
    + config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
    + config = rewireLess(config, env, {
      modifyVars: { "@primary-color": "#1DA57A" },
    });
    return config;
  };

百度了一半天，最后我在其他脚手架里的源码发现了问题所在，原因是格式出错了。


  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
  })(config, env);  //要这样写才行。。

当然不得不提的还有react-app-rewire-less这个库的bug，居然会有语法错误。。我也不知道是怎么回事， 2.0.8 中需要删除一个逗号才能正常使用。这个库的编写者很粗心啊。。。不过当笔者在github上准备交一发的时候发现已经有相关的pull request 等待合并了，所以呢，这个问题等你们看到这篇的时候应该已经fix了~