We need to install the appropriate tools first, you may need install yarn too.
$ npm install -g yarn
$ npm install -g create-react-app
Then we create a new project named antm-demo.
$ create-react-app antm-demo
The tool will create and initialize environment and dependencies automaticly, please try config your proxy setting or use other npm registry if any network errors happen during it.
Then we go inside antm-demo and start it.
$ cd antm-demo
$ yarn start
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
First we install antd-mobile and babel-plugin-import(A babel plugin for importing components on demand principle) from yarn or npm.
$ yarn add antd-mobile
$ yarn add babel-plugin-import less-loader --dev
-
Modify
config/webpack.config.dev.js
extensions: ['.web.js', '.js', '.json', '.jsx'], ... rules: [ { exclude: [ ... /\.less$/, ... ] }, ... // Process JS with Babel. { test: /\.(js|jsx)$/, ... options: { plugins: [ ['import', { libraryName: 'antd-mobile', style: true }], ], cacheDirectory: true, } }, ... { test: /\.less$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ autoprefixer({ browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'], }), pxtorem({ rootValue: 100, propWhiteList: [] }) ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { "@primary-color": "#1DA57A" }, }, }, ], } ]
Note, we only modified webpack.config.dev.js now, if you wish this config working on production environment, you need to update webpack.config.prod.js as well.