theme
Antd(https://ant.design/)作为一个中后台开发框架，可以说是前端开发的福音。
即使不熟悉css，设计也能开发出高质量的后台管理界面。
本文采用create-react-app来创建React项目，值得一提的是react-script最新版本解决了sass开发模式下的sourcemap支持，这让页面开发调试变得容易很多。
1.创建项目
npx create-react-app my-app
2. 安装相关的package
"dependencies": {
"antd": "^3.14.1",
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"react": "^16.8.4",
"react-app-rewired": "^2.1.0",
"react-dom": "^16.8.4",
"react-scripts": "2.1.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
以上为package.json配置内容。
添加测试组件代码
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;
运行yarn start 打开http://localhost:3000/# 可以看到默认的ant组件UI。
高级设置
接下来设置组件的主题。因为create-react-app 屏蔽了webpack的配置文件，因此我们需要 customize-cra 这个项目来重写 less 相关的配置文件。
在项目根目录下添加config-overrides.js文件。
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
// modifyVars: { '@primary-color': '#25b864' },
}),
);
接下来定义一个less文件覆盖ant原生的主题颜色。
my-theme.less
// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
@import "~antd/dist/antd.less";
// mapping scss veraibles to less
@dark: #343a40; // $gray-800
@cyan: #01bcd4;
@green: #66bb6a;
// -------- Colors -----------
@primary-color :green;
@info-color : @cyan;
@success-color : @green;
@processing-color : @blue-6;
@error-color : @red-5; // #ff4d4f
@highlight-color : @red-5;
@warning-color : @gold-5; // #ffc53d
@normal-color : #d9d9d9;
并且在App.js 中 import './my-theme.less'
修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。
