解决初次使用webpack+antd-mobile时css不生效的问题
前端这块，最火的是angular、react、vue。根据你具体的业务场景，选择合适的框架或者类库。以react为例，新建一个项目时，
css组件按钮，图片轮播等组件，最好不要重复造轮子，选择业内规范的，拿来用就行。这里选了一个比较火的antd-mobile。类似移动端的
bootstrap，但是UI组件要比bootstr强大丰富，且专注于结合react使用。
具体使用，可以看官网教程:https://mobile.ant.design/docs/react/introduce。我直接拷贝过来:
1、安装相关包
$ npm install antd-mobile --save $ npm install babel-plugin-import --save-dev
2、在.babelrc 中加入：
{"plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]}
3.webpack.config.js里面css 加载写成如下（这里是重点，这一步没写好，css样式无法正常导入）：
在
webpack loaders配置的时候需要把css和cssmodules分开处理，
并加上excludeorinclude, 不去处理am样式 。
{
test: /\.css$/,
loader: 'css?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!!',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style!css'
},
4.模板页面设置如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>xxxx</title>
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
flex(100, 1);</script>
</head>
<body>
<div id="root"></div>
<script>
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</body>
</html>
5.具体参考官网的demo。他们是怎么写的。重点注意css loader写法。 参考来源：https://github.com/ant-design/babel-plugin-import/issues/61
解决初次使用webpack+antd-mobile时css不生效的问题的更多相关文章
- 缩小窗口时CSS背景图出现右侧空白BUG的解决方法
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
- vue开发中，build时css打包报错
vue在打包的时候css报错,首先声明的这个并没有解决webpack本身的问题,本来这个也是一个警示,不会影响代码正常运行 这个是因为我在多个页面引入了同一个css文件,webpack打包时候对css ...
- extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法
错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问 解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...
- 解决在Linux下安装Oracle时的中文乱码问题
本帖最后由 TsengYia 于 2012-2-22 17:06 编辑 解决在Linux下安装Oracle时的中文乱码问题 操作系统:Red Hat Enterprise Linux 6.1数据库:O ...
- webpack中加载CSS
webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...
- 解决JSONObject.fromObject数字为null时被转换为0
在使用JSONObject.fromObject的时候会遇到一种情况就是当对象的某一个Double型或Integer型的属性为空的时候,转JSON的时候会变成0.当一个布尔型的属性为空的时候,转JSO ...
- 走近webpack（4）--css相关拓展
我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...
- mobile adaptor & css media query
mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
随机推荐
- Windows7 java-jdk1.7安装及设置变量过程
jdk安装的次数较少,容易忘记,这里专门记录一下. 1:jdk1.7网上到处都是可以随便下载一个.然后进行安装,不过在安装过程中把安装路径单独记忆一下,在配置变量的时候会用到. 2:安装完JDK后配置 ...
- Java单例模式的各种实现(饿汉、懒汉、静态内部类、static代码块、enum枚举类型)
饿汉模式 饿汉模式就是立即加载,在方法调用前,实例就已经被创建了,所以是线程安全的. public class MyObject1 { private static MyObject1 myObjec ...
- java设计模式（1）
设计模式定义 设计模式原则 设计模式分类 常用设计模式 (一)设计模式定义 设计模式是针对软件设计中普遍存在的各种问题,所提出的解决方案. 换句话说,设计模式是一套被反复使用,多数人知晓的.经过分类的 ...
- python爬虫实战（一）--------中国作物种质信息网
相关代码已经修改调试成功----2017-4-1 目标网址:http://www.cgris.net/query/croplist.php 实现:爬取相关信息如图所示,爬取的数据存入mysql数据库. ...
- Realm数据持久化方案的简单介绍和使用（二）
接上篇... 4. 可空属性&默认值&忽略属性 默认情况下, 属性值可空, 如果强制要求某个属性非空, 可以使用如下方法: 遵循协议方法 + (NSArray *)requiredPr ...
- Spark处理日志文件常见操作
spark有自己的集群计算技术,扩展了hadoop mr模型用于高效计算,包括交互式查询和 流计算.主要的特性就是内存的集群计算提升计算速度.在实际运用过程中也当然少不了对一些数据集的操作.下面将通过 ...
- FB,Flash,as3 Bug集
一.Flash builder 报错 当导入3.0的项目时运行出现如下错误: 进程已终止,没有建立到调试器的连接.error while loading initial content 启动命令详细信 ...
- Python之路-Linux命令基础（1）
开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语 使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符,使用命令退出虚拟终端 ...
- poptest老李谈jvm的GC
poptest老李谈jvm的GC poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...
- poj 2369 Permutations (置换入门)
题意:给你一堆无序的数列p,求k,使得p^k=p 思路:利用置换的性质,先找出所有的循环,然后循环中元素的个数的lcm就是答案 代码: #include <cstdio> #include ...