第一步 安裝相關組件

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 

@import url(http://www.shnenglu.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);