在第一次使用时,按照官网的进行配置,完了报错找不到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:
}
};

依赖:

{
"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"
}
}

目录结构

antd-mobile使用报错的更多相关文章

  1. adb驱动安装和使用报错笔记

    adb驱动安装 adb驱动下载地址:https://adb.clockworkmod.com/ 安装时候选择一个容易记住的路径,这个很重要,因为adb驱动没有自动配置环境变量,所以实验时候将adb安装 ...

  2. animate is not a function(zepto 使用报错)[转]

    animate is not a function(zepto 使用报错) 1.为什么使用zepto写animate报错? 因为zepto默认构建包含: Core, Ajax, Event, Form ...

  3. Windows下Git使用报错:warning:LF will be replaced by CRLF in ××××.××

    Windows下Git使用报错: warning:LF will be replaced by CRLF in ××××.××(文件名) The file will have its original ...

  4. yum源使用报错

    CentOS系统yum源使用报错:Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge. 服 ...

  5. 2019-9-9:渗透测试,docker下载dvwa,使用报错型sql注入dvwa

    docker下载dvwa镜像,报错型注入dvwa,low级 一,安装并配置docker 1,更新源,apt-get update && apt-get upgrade &&am ...

  6. .net core中Grpc使用报错:The remote certificate is invalid according to the validation procedure.

    因为Grpc采用HTTP/2作为通信协议,默认采用LTS/SSL加密方式传输,比如使用.net core启动一个服务端(被调用方)时: public static IHostBuilder Creat ...

  7. VirtualBox使用报错

    VirtualBox使用报错 1.启动报错:Failed to instantiate CLSID_VirtualBox... 报错内容: Failed to instantiate CLSID_Vi ...

  8. selenium使用报错“selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.”

    安装了python3,使用pip安装了selenium,但是在使用时,报了“selenium.common.exceptions.WebDriverException: Message: 'gecko ...

  9. CentOS系统yum源使用报错:Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge.

    服务器上的yum突然不好使用,使用yum的时候报错如下:[root@bastion-IDC src]# yum list......Could not retrieve mirrorlist http ...

随机推荐

  1. C++11--20分钟了解C++11 (下)

    20分钟了解C++11 9 override关键字 (虚函数使用) * * 避免在派生类中意外地生成新函数 */ // C++ 03 class Dog { virtual void A(int); ...

  2. Aysnc的异步执行的线程池

    ProxyAsyncConfiguration.java源码: @Configuration @Role(BeanDefinition.ROLE_INFRASTRUCTURE) public clas ...

  3. 开发框架-.Net:Learun(力软敏捷开发)

    ylbtech-开发框架-.Net:Learun(力软敏捷开发) 1.返回顶部   2.返回顶部 1. 系统简介:(1)后台采用MVC+EF架构,前台使用Jquery+Bootstrap,界面美观大气 ...

  4. XHR HTTP 请求 get post请求解决方案

    XHR请求的 测试方式, postman 64位下载地址: http://www.downza.cn/download?file=2017%2F01%2FPostmanwin64493.zip& ...

  5. [UE4]纯函数的执行时机

    一.纯函数是在需要的时候被调用 二.纯函数内不应当修改任何数据 三.如果同一个函数需要多个得到多个纯函数的返回值,则多个纯函数的调用顺序不是固定的,并且一个纯函数的调用顺序也不应当影响下一个纯函数的返 ...

  6. [UE4]Switch on String,根据字符串决定条件分支,类似于高级语言中的switch语句

  7. 本机无法访问虚拟机里面的nginx的80端口

    在虚拟机VMware上装好了centos6.9,并配好了nginx,但是本机就是无法访问.具体情况如下1.本机能ping通虚拟机2.虚拟机也能ping通本机3.虚拟机能访问自己的web4.本机无法访问 ...

  8. ArcEngine 创建空间参考设置默认域

    ISpatialReferenceFactory3 spatialReferenceFactory = new SpatialReferenceEnvironmentClass(); outSR = ...

  9. vue写后台管理系统问题概述和解决方案

    一个不错的Demo; http://xmall.exrick.cn/#/home 源码:https://gitee.com/Exrick/xmall-front/blob/master/src/pag ...

  10. npm指南

    什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ruby , pear 之于 PHP . npm 是 Node 官方提供的包管理工具,他已经成了 Node ...