方法为通过less-loader的modifyVars来修改原来的默认less，需要安装style-loader，css-loader，less-loader，postcss-loader，如报错没有找到某些模块，再自行安装相应模块

  1. 修改项目根目录/node_modules/react-scripts/config/webpack.config.dev.js文件
    在代码
    var path = require( 'path' );
    后添加代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var fs = require( 'fs' )
    const pkgPath = path.join( process.cwd(), 'package.json' );
    const getTheme = ( pkgPath ) => {
    if ( fs.existsSync( pkgPath ) ) {
        const pkg = require( pkgPath )
        console.log( typeof ( pkg.theme ) )
        if ( typeof ( pkg.theme ) === 'object' && pkg.theme.constructor === Object ) {
        return themeContent
        } else {
        const themePath = path.join( process.cwd(), pkg.theme )
        const themeContent = require( themePath )()
        return themeContent
        }
    }
    }
    var themeContent = JSON.stringify( getTheme( pkgPath ) ).replace( /_/g, '-' )

    然后在exclude内添加 /\.less$/（注意添加逗号）
    在loaders对象数组内添加（注意添加逗号）

    1
    2
    3
    4
    {
        test: /\.less$/,
        loader: 'style!css!postcss!less?{modifyVars:' + themeContent + '}'
    }

  2. 修改根目录的package.json文件，添加代码

    1
    "theme": "./theme.js"

  3. 在根目录添加theme.js文件，文件中代码如下，brand_primary为主题色，如需修改其他颜色，可进入node_modules/antd-mobile/lib/style/theme/default.less查看以作相应修改

    1
    2
    3
    module.exports = () => ({
        brand_primary: 'green',
    })

  4. 修改.balelrc内的"style": "css"为"style": true

  5. 大功告成