Ant-design-mobile: web 项目下自定义主题报错

[alvin198761]

你好，我用ant-design 做了微信公众号的h5项目，用的 ant-design-mobile
框架是用的 dva ,项目整个过程都没有问题，但是我再自定义主题的时候，
发现按照官网的方式定义不了，webpack 引入和 覆盖引入都报同样的错，

[start ] Compiling...
[start ] Failed to compile.
[start ]
[start ] ./src/theme.less
[start ] Module build failed:
[start ]
[start ] height: @icon-size-xxs;
[start ] .encoded-svg-background('right');
[start ] ^
[start ] Inline JavaScript is not enabled. Is it set in your options?
[start ] in E:\2017-new-workspace\dl-keep-cloud\sources\dl-keep-cloud\app-center\src\main\webappnode_modules\antd-mobile\lib\accordion\style\index.less (line 36, column 8)

这是我package.json 的环境

"dependencies": {
"@antv/f2": "^3.1.3-beta.2",
"antd-mobile": "^2.1.8",
"babel-runtime": "^6.9.2",
"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"
}

[ant-design-bot]

Translation of this issue:

---

web project custom topic error

Hello, I used ant-design to do the WeChat account h5 project, using ant-design-mobile
The framework is a dva. There is no problem with the project, but when I customize the theme,
Found that according to the official website can not be defined, webpack introduction and coverage of the introduction of the same error,

[start ] Compiling...
[start ] ?Failed to compile.
[start ]
[start ] ./src/theme.less
[start ] Module build failed:
[start ]
[start ] height: @icon-size-xxs;
[start ] .encoded-svg-background('right');
[start ] ^
[start ] Inline JavaScript is not enabled. Is it set in your options?
[start ] in E:\2017-new-workspace\dl-keep-cloud\sources\dl-keep-cloud\app-center\src\main\webappnode_modules\antd-mobile\lib\accordion\style\index .less (line 36, column 8)

This is my package.json environment

"dependencies": {     "@antv/f2": "^3.1.3-beta.2",     "antd-mobile": "^2.1.8",     "babel-runtime": "^6.9.2",     "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"   }

[wangking873]

[alvin198761]

1.package.json 注意我添加的项，要去掉注释哦

{
"private": true,
"scripts": {

"start": "roadhog server",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
},
"engines": {

"install-node": "6.9.2"
},
"dependencies": {

"antd-mobile": "^2.1.8",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1"
"rc-form": "^2.1.7",
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {

"babel-eslint": "^7.1.1",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"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-vars-to-js": "^1.1.2", //注意这个地方，是增加的
"redbox-react": "^1.3.2",
"roadhog": "^1.3.1"
}
}

2.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'); //导入覆盖样式的less
return lessToJs(fs.readFileSync(themePath, 'utf8'));
};

3.default.less 我就覆盖了一下品牌色

// 导入默认样式
@import '~antd-mobile/lib/style/themes/default.less';

// 全局/品牌色
@brand-primary: #ff6600;

4..roadhogrc.js 如果脚手架默认是 .roadhogrc ，可以直接改成 .roadhogrc.js，不影响
const path = require('path');

const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn.js$/, ''), // antd-mobile 内置svg
// path.resolve(__dirname, 'src/svg/'), // 业务代码本地私有 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 }]
]
},
production: {
extraBabelPlugins: [
'transform-runtime',
['import', { 'libraryName': 'antd-mobile', 'libraryDirectory': 'lib', 'style': true }]
]
}
}

}

你的办法不行，我已经自己解决了，这样才行