ant-mobile & create-react-app 自定主题 高清方案

[aototo]

官方文档： https://mobile.ant.design/docs/react/customize-theme-cn

问题：ant-mobile 使用 px 作为样式基本单位，在750 vw 方案下，内容会被缩小，需要把基础变量提升2倍，以便支持高清模式。

制定方案：使用 modifyVars 的方式来覆盖变量。

适用：webpack 3+ 以上

代码 第一步：配置 babel-plugin-import 确保加载 antd-mobile less 文件， package.json 如下

style 为true时候，引入 less 文件，等于 'css' 时候 加载编译好的 css 文件，这里要设置less，才可以修改变量

{
    ...
    "plugins": [
        ["import", {"libraryName": "antd-mobile", "style": true}],
    ]
}

二步：修改les-loader ， 不同的webpack 会不一样的配置，如果是create-react-app 生成的项目，需要修改webpack.config.js 中 getStyleLoaders函数

{
  loader: 'less-loader', 
  options: {
    modifyVars: {
      "hd": "2px"
    },
   javascriptEnabled: true // 不开启会报错
 }
},

// 如果是create-react-app, 进入webpack.config.js， 找到 getStyleLoaders函数

if (preProcessor) {
      let options = {
        sourceMap: isEnvProduction && shouldUseSourceMap
      }
      if (preProcessor === 'less-loader') {
        /* 导入 antd mobile Theme 主题 */
        options = {
          ...options,
          modifyVars: antdMobileTheme,
          javascriptEnabled: true
        }
      }
      loaders.push(
        ...
        {
          loader: require.resolve(preProcessor),
          options: options
        }
       ...
      );
    }