vale1534 / electron-react-antd-startkit Goto Github PK

构建 Electron + React + AntD 应用，同时应用了 Redux、Thunk、Saga 工具包。

工具链有点复杂，Flow 静态类型检查是个负担 ，少些关注工具链，多花些时间写实际代码。

Flow 工具已移除，优化 ESLint 代码检查，用好 Jest 测试工具。

克隆项目：

git clone https://github.com/wenris/electron-react-antd-startkit.git project-name

推荐**国内用户使用 taobao.org 源，依赖包下载：

set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
yarn install --registry=http://registry.npm.taobao.org

Flow 静态类型检查：yarn flow ；

运行热加载开发模式应用程序：yarn dev；

其他详见 packages.json 文件。

添加 antd 与 less 包：

yarn add -D antd less

增加 app/antd-styles/antd-theme.less 文件，内容如下：

@import "node_modules/antd/lib/style/index.less";
@import "node_modules/antd/lib/style/components.less";

// 定制主题，覆盖上面定义的变量
// @primary-color : #f8900f;

在 package.json 增加下面 less 编译指令：

"less": "lessc --js ./app/antd-styles/antd-theme.less ./app/antd-styles/antd-theme.css"

定制好 AntD 主题，手动将 antd-theme.less 转译成 antd-theme.css 文件后，引入到 app.global.css 样式中。

再也不要去折腾在工具链中引入 less 支持了，毫无意义。

因为两者不冲突，优劣势互补，提供了最大的设计弹性。

暂且支持 css 和 scss ，默认导入以 css-module 方式导入，除非文件名以 *.global.css 或 *.global.scss 。在样式表中，除了以 :global 修饰的选择类名都会加以本地命名，比如：

.local-class { ... }
:global(.other-class) { ... }

local-class 将会重写命名，other-class 不会，在 js 代码中使用如下：

import styles from 'mycomponent.css';

function MyComponent((props) => {
  return (<div className={styles["local-class"}/>
    ...
  <div>);
});