- antd-mobile 版本：2.1.8
- 浏览器 (或标明是 react-native) 及其版本： Google Chrome 65.0.3325.181（正式版本） （64 位）
- 操作系统及其版本：windows 10 家庭版正版 （64位）
前提：无法自定义主题，参照 web-roadhog
报错：
./node_modules/antd-mobile/lib/input-item/style/index.less
Module build failed:
&.keyboard-delete {
.encoded-svg-background('input_item_kb_backspace');
^
Inline JavaScript is not enabled. Is it set in your options?
in E:\2017-new-workspace\dl-keep-cloud\sources\dl-keep-cloud\app-center\src\main\webapp\node_modules\antd-mobile\lib\input-item\style\custom-keyboard.less (line 136, column 10)
我的配置：
.roadhogrc.js
const path = require('path');
const pxtorem = require('postcss-pxtorem');
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // antd-mobile 内置svg
];
export default {
entry: 'src/index.js',
svgSpriteLoaderDirs: svgSpriteDirs,
theme: "./theme.config.js",
env: {
development: {
extraBabelPlugins: [
'dva-hmr',
'transform-runtime',
['import', { 'libraryName': 'antd-mobile', 'libraryDirectory': 'lib', 'style': true }]
],
extraPostCSSPlugins: [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
],
},
production: {
extraBabelPlugins: [
'transform-runtime',
['import', { 'libraryName': 'antd-mobile', 'libraryDirectory': 'lib', 'style': true }]
],
extraPostCSSPlugins: [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
],
}
},
"proxy": {
"/": {
"target": "http://localhost:8003",
"changeOrigin": true,
"secure": false
}
}
}
---------------------华丽丽的分割线----------------------------
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';
// 全局/品牌色
@brand-primary: #ff6600;
---------------------华丽丽的分割线----------------------------
package.json 环境
"dependencies": {
"@antv/f2": "^3.1.3-beta.2",
"antd-mobile": "^2.1.8",
"babel-runtime": "^6.9.2",
"bootstrap": "^3.3.7",
"dva": "^1.2.1",
"font-awesome": "^4.7.0",
"js-cookie": "^2.2.0",
"moment": "^2.22.0",
"rc-form": "^2.1.7",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"reqwest": "^2.0.5"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.7.0",
"babel-plugin-transform-runtime": "^6.9.0",
"css-loader": "^0.28.11",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.12.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"less-vars-to-js": "^1.2.1",
"mockjs": "^1.0.1-beta3",
"npm-run-all": "^4.1.2",
"postcss-pxtorem": "^4.0.1",
"redbox-react": "^1.4.3",
"roadhog": "^1.1.1",
"shelljs": "^0.8.1",
"style-loader": "^0.20.3"
}
多种方式都使过了，直接把我的代码嫁接到 项目例子上，编译不报错，但是样式全部都没有了，
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent