antd-mobile使用报错

在第一次使用时，按照官网的进行配置，完了报错找不到antd-mobile下面的css

解决方法来源于 ：https://github.com/ant-design/ant-design-mobile/issues/516#issuecomment-293632772

依赖：
less  
less-loader 
svg-sprite-loader
babel-plugin-import

webpack配置文件：
//svg
const svgSpriteDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
  //path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
];
{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: svgSpriteDirs,
}
//less
{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
}
// babel js
{  
      test: /\.js$/, 
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
            presets: ['es2015','react']
      },
}

//resolve,解决 antd-mobile 代码查找问题
resolve: {
    mainFiles: ["index.web","index"],// 这里哦
    modules: ['app', 'node_modules', path.join(__dirname, '../node_modules')],
    extensions: [
      '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx',
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },

 

在.babelrc文件中配置，在原文中式在 JS 哪里配置的，但是我配置的时候报错， 下面这样配置才可以使用，不解。。。，除了这里其他都是一致的，

{
  "plugins": [
    ["import", {
      style: 'css' ,  // 'less',
      libraryName: 'antd-mobile'
    }]
  ]
}

 

我自己的配置源码：

const webpack = require("webpack"),
    path = require('path'),
    ExtractTextPlugin = require("extract-text-webpack-plugin"),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
      pxtorem = require('postcss-pxtorem');
      
const modelPath = 'test';      //运行打包的模块
      
const svgSpriteDirs = [
    require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
    //path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
];
module.exports = {
    entry:{//入口
        index: path.resolve(__dirname, 'src/'+ modelPath +'/index.js'),
        vendor: ['babel-polyfill', 'react', 'react-dom', 'react-router'] //插件入口,合并第三方包
    },
    output:{//出口
        path: path.resolve(__dirname, 'dist/'+ modelPath),
        filename: '[name].[hash:7].js', //入口文件命名
        chunkFilename: '[name].chunk.[hash:7].js' //非入口文件命名
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','react']
                }
            },
            {
                test: /\.css/,
                loader: ExtractTextPlugin.extract({//css样式抽离
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}!sass-loader'
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version"]}!less-loader'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
            },
            {
                test: /\.woff$/,
                loader: 'url-loader?limit=100000'
            },
            {
              test: /\.svg$/,
              loader: 'svg-sprite-loader',
              include: svgSpriteDirs,
            }
        ]
    },
    plugins:[
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        //文件压缩
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false
            },
            compress: {
                warnings: false
            }
        }),
        //插件合并
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendor",
            filename:"vendor.[hash:7].js"
        }),
        //css引入--内联
        new ExtractTextPlugin("[name].[hash:7].css"),
        //导出最终生成的入口文件html
        new HtmlWebpackPlugin({
            filename: 'index.html',//文件名
            template: 'src/'+ modelPath +'/index.html',//入口
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        })
    ],
    //resolve,解决 antd-mobile 代码查找问题
    resolve: {
        mainFiles: ["index.web","index"],// 这里哦
        modules: ['app', 'node_modules', path.join(__dirname, '../node_modules')],
        extensions: [
          '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx',
          '.js',
          '.jsx',
          '.react.js',
        ],
        mainFields: [
          'browser',
          'jsnext:main',
          'main',
        ],
      },
    devServer: {
        host: 'localhost',
        hot:true,
        port: 8081
    }
};

依赖：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "set NODE_ENV=production&&webpack -p --progress --colors",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.4.0",
    "babel-plugin-transform-remove-strict-mode": "^0.0.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "react-hot-loader": "^3.0.0-beta.6",
    "redux-devtools": "^3.3.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.2",
    "svg-sprite-loader": "^3.2.4",
    "url-loader": "^0.5.9",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "antd-mobile": "^1.6.3",
    "babel-polyfill": "^6.23.0",
    "react": "^15.5.4",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.0",
    "redux": "^3.6.0",
    "weui": "^1.1.2",
    "whatwg-fetch": "^2.0.3"
  }
}

目录结构