in the project of developing react+antd (antd-mobile) + webpack, you want to configure the style of antd (antd-mobile) to load on demand. To find two solutions on the Internet, both are configured in different places using the babel-plugin-import plug-in:
1, .babelrc
{
"plugins": [
["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` less
]
}
the result is wrong
2babel-loader option
I don"t know where my two configurations are wrong respectively. Please attach my package.json configuration file to see if there is any conflict.
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development node build/webpack.dev.js --host 0.0.0.0",
"start": "cross-env NODE_ENV=development node build/webpack.dev.js",
"build": "cross-env NODE_ENV=produce node build/webpack.produce.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-import": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.4",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-react": "^7.1.0",
"eslint-plugin-standard": "^2.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"image-webpack-loader": "^3.3.1",
"jsx-loader": "^0.13.2",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^0.9.1",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.18.2",
"uglifyjs-webpack-plugin": "^0.4.6",
"url-loader": "^0.5.9",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"antd": "^2.12.1",
"antd-mobile": "^2.1.8",
"axios": "^0.16.2",
"echarts": "^3.6.2",
"jquery": "^3.2.1",
"moment": "^2.20.1",
"rc-form": "^2.2.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^4.4.0",
"react-router": "^3.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
}
}