react引入ant-obile-designer

Question

react中引入ant，样式为嘛会这样？这么大？

1 webpack.config.js

let path = require('path');
let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH,'app/');
let BUILD_PATH = path.resolve(ROOT_PATH,'public/');
let HtmlWebpackPlugin = require('html-webpack-plugin');

console.log(APP_PATH);
console.log(__dirname + "/app/main.js")
console.log(BUILD_PATH);
console.log(__dirname + "/public")

module.exports = {
entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
  path: __dirname + "/public",//打包后的文件存放的地方
  filename: "bundle.js"//打包后输出文件的文件名
},

devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
},
resolve:{
    //当从 npm 包中导入模块时（例如，import * as D3 from "d3"），此选项将决定在 package.json 中使用哪个字段导入模块
    mainFiles: ["index.web","index"],// 这里哦
    modules: [path.resolve(__dirname, "app"), "node_modules"],
    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json','.css','.less'],
},
module:{
    rules:[
        {
            test:/\.(js|jsx)$/,
            use:['babel-loader'],
            exclude:/node-modules/,
            include: APP_PATH
        },
        {
            test:/\.(css|less)$/,
            use:['style-loader','css-loader','less-loader']
        }
    ]
},
   
        


plugins: [
    // new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
        template: __dirname + "/app/index.html"//new 一个这个插件的实例，并传入相关的参数
    })
],

}

2 package.json

{
  "name": "react-mock2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "postcss-pxtorem": "^3.3.1",
    "style-loader": "^0.18.2",
    "svg-sprite-loader": "^0.3.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "antd-mobile": "^1.6.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

3 问题出在哪里？

Answer 1

我刚开始用的时候也遇到了这个问题，有两个解决办法，一个比较low，一个正规一点，
第一个比较low的方法就是

直接把antd-mobile dist输出的css引到页面里。这个方法是我刚开始用antd想到的，最快的解决了这个问题。
第二个方法是需要在你的webpack.config.js文件中的解析.less文件的地方加上postcss-loader和postcss-plugin-px2rem插件。 postcss-plugin-px2rem是把代码中的px转成rem。

---

科普：rem是根据html设font-size来计算出最终大小的。举个栗子，html中设置font-size:50px; 然后你在某个div写了 width:1rem;那么最终这个div的宽度就是50(px)*1(rem) = 50px;
科普2：现在移动端开发比较多，以iphone6为例，我们开发时是以375px为页面宽度的，但设计师一般都是给的750px为宽度的切图，这样每次设置css的时候都要将尺寸先÷2岂不是很麻烦。利用热门和postcss-plugin-px2rem就能解决这个问题，当设计师给出宽度为20px,你在css中写witdh:20px,利用postcss-plugin-px2rem插件就能转化成width:0.2rem, 再和html中的font-size结合 50(px)*0.2(rem) = 10px; 最终页面上出现的是10px的元素。

---

antd-mobile应该也是用了这个方法，只是你的工程中少了px-rem 的过程。
webpack具体配置如下

然后在全局设置html