React+dva+ant-design-mobile 配置高清模式、支持svg图标和自定义主题

0
0

第一步 安装相关组件

npm install postcss-pxtorem --save
npm install svg-sprite-loader --save
npm install babel-plugin-import --save
npm install roadhog@0.6.0-beta1 --save # 必须是这个版本

第二步 修改 package.json

在末尾添加

    "theme": "./theme.config.js"

第三步 配置文件.roadhogrc.js

  • 将.roadhogrc 改为 .roadhogrc.js , 配置如下:

import pxtorem from 'postcss-pxtorem';
const path          = require( 'path' );
const svgSpriteDirs = [
  require.resolve( 'antd-mobile' ).replace( /warn\.js$/ , '' ) , 
  // antd-mobile 内置svg
  // 业务代码本地私有 svg 存放目录
  path.resolve( __dirname , 'src/assets/fonts' ) ,  
];

export default {
  entry : "src/index.js" ,
  disableCSSModules : false ,
  publicPath : "/" ,
  theme : "./theme.config.js" ,
  svgSpriteLoaderDirs : svgSpriteDirs ,
  autoprefixer : {
    browsers : [
      "iOS >= 8" ,
      "Android >= 4"
    ]
  } ,
  proxy : { } ,
  extraPostCSSPlugins : [
    pxtorem( {
      rootValue : 100 ,
      propWhiteList : [] ,
    } ) ,
  ] ,
  // style 必须是 true
  extraBabelPlugins : [
    "transform-runtime" ,
    [
      "import" ,
      { libraryName : "antd-mobile" , "libraryDirectory" : "lib" , "style" : true }
    ]
  ] ,
  env : {
    development : {
      extraBabelPlugins : [
        "dva-hmr"
      ]
    }
  }
};

第四步 创建 theme.config.js 文件 ,内容如下:


const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');

module.exports = () => {
  const themePath = path.join(__dirname, './themes/default.less');
  return lessToJs(fs.readFileSync(themePath, 'utf8'));
};

第五步 创建./themes/default.less 文件,内容如下:

// 本文件是对 ant-design-mobile:
// https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
// 相应变量值的覆盖
// 注意:只需写出要覆盖的变量即可(不需要覆盖的变量不要写)
@import '~antd-mobile/lib/style/themes/default.less';

// 色彩
// ---
// 文字色
@color-text-base: #333; // 基本
@color-text-secondary: #999; // 辅助色
@color-text-caption: #999; // 辅助描述
@color-text-paragraph: #333; // 段落

// 全局/品牌色
@brand-primary: #f73;
@brand-primary-tap: #dd7742;
//
// 圆角
// ---
@radius-md: 40px;

// 边框尺寸
// ---
@border-width-sm: 1px;

// 字体尺寸
// ---
@font-size-icontext: 16px;
@font-size-caption-sm: 20px;
@font-size-base: 24px;
@font-size-subhead: 26px;
@font-size-caption: 28px;
@font-size-heading: 30px;
@font-size-display-sm: 32px;
@font-size-display-md: 28px;
@font-size-display-lg: 44px;
@font-size-display-xl: 56px;

// button
@button-height: 80px;
@button-font-size: 32px;

@button-height-sm: 56px;
@button-font-size-sm: 22px;

完成

npm start 

评论(0)

发表评论

DMGChat