antd-mobile定制主題

antd-mobile定制主題

2020-08-26

---

create-react-app 與 antd-mobile 構建項目，主題不符合，遂改變主題

准備工作：

1. 構建新react項目 create-react-app projrct-name
2. 導入antd-mobile： npm install antd-mobile --save
3. 為了使項目最小化，我使用按需加載方式引入

---

正文

按需加載：

1. npm install react-app-rewired customize-cra babel-plugin-import --save-dev
2. 根目錄創建：config-overrides.js, 該文件用來修改默認配置

• 初始化文件

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

• 修改 package.json, 原本由react-scripts啟動的腳本改為 react-app-rewired, 如下

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject",
    "client": "serve build"
  }

• 修改 config-overrides.js 文件, 修改后文件如下

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: true
  })
);

• 更改引用方式
  import { Button } from 'antd-mobile';
  至此，實現了按需引入

改變主題

1. 下載所需依賴：
   npm install --save-dev babel-plugin-import less less-loader style-loader css-loader
2. 無需暴露 webpack配置，直接在config-overrides.js 文件修改，修改文件如下

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
    '@brand-primary': '#ff00ff',
    '@color-text-base': '#333',
   }
  }),
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true
  })
);

3. 自定義 theme.json文件,我放在項目根目錄

{
  "@brand-primary": "#1cae82",
  "@brand-primary-tap": "#1da57a"
}

4. 修改 config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

// ---------導入樣式文件
const theme = require('./theme.json');

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme
  }),
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true
  })
);

5. 重啟項目，然后你會發現less-loader6.0+報錯了，哈哈哈哈哈，
   報錯信息如下：

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. 

這是因為less-loader6.0+的兼容問題，兩個解決辦法

• 第一種： 移除 less-loader@6.0.0 並 install less-loader@5.0.0
• 第二種： 修改 config-overrides.js 文件

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const theme = require('./antd-theme.json');

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme
    }
  }),
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true
  })
);

6. 然后再停掉重啟項目，終於 ok 了

---

參考：

https://mobile.ant.design/docs/react/use-with-create-react-app-cn

https://www.jianshu.com/p/7097348cd900

https://github.com/ant-design/ant-design-landing/issues/235