解决初次使用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 ...
随机推荐
- 【读书笔记】-- 你不知道的JavaScript
<你不知道的JavaScript>是一个不错的JavaScript系列书,书名可能有些标题党的意思,但实符其名,很多地方会让你有耳目一新的感觉. 1.typeof null === &qu ...
- Dapper源码学习和源码修改
之前ORM比较火热,自己也搞了个WangSql,但是感觉比较low,大家都说Dapper性能好,所以现在学习学习Dapper,下面简单从宏观层面讲讲我学习的Dapper. 再了解一个东西前,先得学会使 ...
- trimpath javascript的学习
TrimPath是javascript模板引擎. 这几天有一个项目涉及到trimpath这个框架,所以就花了一点时间研究了一下,这个框架和别的javascript框架不太一样的地方就是模板的概念,就是 ...
- Python快速入门（3）
数据结构: 列表的元素可变,用[] or list()创建. 元祖的元素不可变,用() or tuple()创建. 集合的元素不可重复,用{} or set()创建. 字典的存放K-V,用dict() ...
- iwebshop上传类的使用
$upload = new IUpload('10240000',array('jpg','gif','png')); $dir = "upload/dian"; $upload- ...
- MYSQL性能优化--分库分表
1.分库分表 1>纵向分表 将本来可以在同一个表的内容,人为划分为多个表.(所谓的本来,是指按照关系型数据库的第三范式要求,是应该在同一个表的.) 分表理由:根据数据的活跃度进行分离,(因为不同 ...
- 持续集成：TestNG组织如何测试用例 1
持续集成:TestNG组织如何测试用例 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90 ...
- 老李秘技：loadrunner11.5支持net4.0么？
老李秘技:loadrunner11.5支持net4.0么? LoadRunner12.0以前的版本不支持.NET 4.0,已经证实R&D团队将在下一版本的LoadRunner即LoadRu ...
- Snapman开发接口
#include "stdafx.h" #include <Windows.h> #include <string> #include<time.h& ...
- 1135: 零起点学算法42——多组测试数据（求和)IV
1135: 零起点学算法42--多组测试数据(求和)IV Time Limit: 1 Sec Memory Limit: 64 MB 64bit IO Format: %lldSubmitted ...