webpack andd自定义原色

nafvub8i  于 2023-01-13  发布在  Webpack
关注(0)|答案(2)|浏览(117)

我使用antd和create-react-app来创建我的应用程序。
我下面举个例子:https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme
这里他们给出了使用webconfig的例子。当我试图替换相同的时候,我无法改变原色。有人能告诉我如何在create-react-app中做同样的事情吗?

m1m5dgzv

m1m5dgzv1#

如果你不想使用react-scripts eject,你可以简单地创建一个less文件(比如main.less),导入antd.less,并在这个main.less文件中替换ant design的默认变量。
使用lessc(npm i -g less)编译这个less文件。
lessc“main.less antd.css”--js --js用于内嵌javascript in less现在只需将这些编译过的css包含在您的应用程序中。
查看https://medium.com/@aksteps/782c53cbc03b以获得完整的演练

o2g1uqev

o2g1uqev2#

更新:大家请看答案的日期。是2018年的,是当时公认的答案。现在可能已经过时了,请参考最新的官方文件或答案。

第一种方式手动弹出create-react-app

您需要使用npm run eject弹出以控制webpack.config.js
那么你可以使用LESS的modifyvars来改变原色
就像导游解释的那样
以下为英语版本:
https://ant.design/docs/react/customize-theme
https://github.com/webpack-contrib/less-loader#less-options

第二,使用无React应用程序重新连线

导入它并修改config-overrides.js,如下所示。

$ yarn add react-app-rewire-less --dev
  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);  // change importing css to less
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);
    return config;
  };

查看更多信息:https://ant.design/docs/react/use-with-create-react-app

相关问题