前端这块，最火的是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 分开处理，
并加上 exclude or include, 不去处理 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不生效的问题的更多相关文章

  1. 缩小窗口时CSS背景图出现右侧空白BUG的解决方法

    页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...

  2. vue开发中，build时css打包报错

    vue在打包的时候css报错,首先声明的这个并没有解决webpack本身的问题,本来这个也是一个警示,不会影响代码正常运行 这个是因为我在多个页面引入了同一个css文件,webpack打包时候对css ...

  3. extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法

    错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问  解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...

  4. 解决在Linux下安装Oracle时的中文乱码问题

    本帖最后由 TsengYia 于 2012-2-22 17:06 编辑 解决在Linux下安装Oracle时的中文乱码问题 操作系统:Red Hat Enterprise Linux 6.1数据库:O ...

  5. webpack中加载CSS

    webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载 基本使用: 安装webpack的加载插件style-loader和css-loader: npm install style-lo ...

  6. 解决JSONObject.fromObject数字为null时被转换为0

    在使用JSONObject.fromObject的时候会遇到一种情况就是当对象的某一个Double型或Integer型的属性为空的时候,转JSON的时候会变成0.当一个布尔型的属性为空的时候,转JSO ...

  7. 走近webpack（4）--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用we ...

  8. mobile adaptor & css media query

    mobile adaptor & css media query 移动端适配 & 媒体查询 http://cssmediaqueries.com/ device-aspect-rati ...

  9. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

随机推荐

  1. Sql Server优化---统计信息维护策略

    本位出处:http://www.cnblogs.com/wy123/p/5748933.html 首先解释一个概念,统计信息是什么: 简单说就是对某些字段数据分布的一种描述,让SQL Server大概 ...

  2. HTML页面内容禁止选择、复制、右键

    <body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false' onselectst ...

  3. 说说API的防重放机制

    说说API的防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你的请求原封不动地再发送一次,两次...n次,一般正常的请求都会通过验证进入到正常逻辑中,如果 ...

  4. X-Scan使用教程

    下载X-Scan扫描器,解压缩,双击Xscan_gui.exe即可运行,不需要安装.X-Scan采用多线程的方式,对指定主机或者网段进行扫描. 其扫描功能(插件)有: 开放服务:扫描TCP端口状态,根 ...

  5. django进阶-4

    前言: 下篇博客写关于bootstrap... 一.如何在脚本测试django from django.db import models class Blog(models.Model): name ...

  6. 转：js,jQuery 排序的实现,网页标签排序的实现,标签排序

    js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...

  7. API测试自动化——基于CDIF的SOA基本功能（实例篇）

    今天我们通过一些实例来体验一下API的自动化测试,感受一下基于CDIF的SOA的一些基本功能. 传统的测试工具在测试一个API的时候,必须手动填写这个API所需要接收的所有信息,比如一个查询航班动态的 ...

  8. JavaWeb之HTTP协议

    一.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. ...

  9. Appium和Robotium在文字输入上的区别

    Appium和Robotium在文字输入上的区别   Appium和Robotium在对文本框进行输入时有一定的区别: Appium在输入文字时需要调用系统键盘 Robotium在输入文字是根本不需要 ...

  10. Git基本操作命令

    先配置用户和邮箱: Administrator@USER-20150302NL MINGW32 ~$ git config --global user.name "youname" ...