Question

在我的应用程序中修改antd时遇到了很多问题。我绝对不想尝试弹出webpack config.js文件，因为我绝对不喜欢webpack。而且我不希望我的网站看起来像是蚂蚁克隆。但是，我尝试了许多方法，例如config-override.js。 package.json中的主题，这些都不起作用！坚果！这是我的package.json：

{
  "name": "gui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.9.3",
    "axios": "^0.18.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.5.2",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "dev-server": "0.0.2",
    "live-server": "^1.2.0",
    "node-sass": "^4.5.3",
    "normalize.css": "^7.0.0",
    "react": "^16.5.2",
    "react-app-rewire-antd": "^1.0.3",
    "react-app-rewire-less": "^2.1.3",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "ts-import-plugin": "^1.5.5",
    "validator": "^8.0.0",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "dev-server": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.9.1",
    "react-app-rewired": "^1.6.2",
    "ts-loader": "^4.4.2",
    "typescript": "^3.1.1"
  },
  "theme": {
    "primary-color": "#1DA57A",
    "menu-bg": "#1DA57A"
  }
}

和我的config-overrides.js：

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

module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
    config,
  );
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
    javascriptEnabled: true,
  })(config, env);
  return config;
};

Answer 1

不要紧，必须将index.js上的import语句更改为

导入'antd / dist / antd.less'而不是CSS。对不起，兄弟姐妹。

在create-react-app中修改antd主题而不弹出webpack

1 个答案: