package.json antd-mobile, babel-plugin-import
"dependencies": {
"antd-mobile": "^2.1.11",
"autoprefixer": "^8.6.2",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.7.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"express": "^4.16.3",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"postcss-flexbugs-fixes": "^3.3.1",
"postcss-loader": "^2.1.5",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.0.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
--------------------
webpack.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"],
plugins: [
["import", {
"libraryName": "antd-mobile",
"style": "css", // or "css"
}]
]
},
},
},
{
test: [/\.jpe?g$/, /\.gif$/, /\.png$/, /\.bmp$/, /\.ico$/, /\.svg$/],
exclude: /node_modules/,
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "dist/assets/[name].[hash:8].[ext]",
},
},
{
test: [/\.css$/, /\.scss$/],
exclude: /node_modules/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9", // React doesn"t support IE8 anyway
],
flexbox: "no-2009",
}),
],
},
},
],
},
]
},
App.js
import React, { Component } from "react";
import {
Link
} from "react-router-dom"
import {Button} from "antd-mobile"
class App extends Component {
render() {
return (
<div>
<h1>Hello World!!!!!!</h1>
<Button>Button</Button>
</div>
);
}
}
export default App;
error
ERROR in ./node_modules/antd-mobile/lib/button/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/mixins";
| @import "../../style/themes/default";
| @buttonPrefixCls: am-button;
@ ./node_modules/antd-mobile/lib/button/style/index.js 7:0-23
@ ./src/containers/App.js
@ ./index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
ERROR in ./node_modules/antd-mobile/lib/icon/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "../../style/themes/default";
| @import "../../style/mixins";
|
@ ./node_modules/antd-mobile/lib/icon/style/index.js 3:0-23
@ ./node_modules/antd-mobile/lib/button/style/index.js
@ ./src/containers/App.js
@ ./index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
ERROR in ./node_modules/antd-mobile/lib/style/index.less 1:0
Module parse failed: Unexpected character "@" (1:0)
You may need an appropriate loader to handle this file type.
> @import "./themes/default";
| @import "./mixins";
| @import "./anim";
@ ./node_modules/antd-mobile/lib/style/index.js 5:0-23
@ ./node_modules/antd-mobile/lib/button/style/index.js
@ ./src/containers/App.js
@ ./index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
ERROR in ./node_modules/normalize.css/normalize.css 12:5
Module parse failed: Unexpected token (12:5)
You may need an appropriate loader to handle this file type.
| */
|
> html {
| line-height: 1.15; /* 1 */
| -ms-text-size-adjust: 100%; /* 2 */
@ ./node_modules/antd-mobile/lib/style/index.js 3:0-38
@ ./node_modules/antd-mobile/lib/button/style/index.js
@ ./src/containers/App.js
@ ./index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js