前端这块，最火的是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. 解决SQLServer 2008 日志无法收缩，收缩后大小不改变

    问题 数据库日志文件上G,或者几十G了,使用日志收缩,和日志截断收缩都不管用.体积一直减不下来.. 解决方案 查看日志信息 在查询分析器中执行如下代码来查看日志信息:  DBCC LOGINFO('数 ...

  2. C#生成漂亮验证码完整代码类

    using System;using System.Web;using System.Drawing;using System.Security.Cryptography; namespace Dot ...

  3. iOSiOS开发之退出功能（易错）

    如果,我们有两个控制器,第一个控制器是MainController,它是与Main.storyboard相关联的.第二个控制器是myController.假设myController中有一个退出按钮, ...

  4. Spring+SpringMVC+MyBatis+easyUI整合优化篇（一）System.out.print与Log

    日常啰嗦 距离上一次更新博客有一段时间了,主要是因为最近有开发任务,另外,这段时间也在学习docker的相关知识,所以博客就没有继续写了,推荐一本书<Docker技术入门与实战>(第二版) ...

  5. [Python]获取子线程异常信息

    起因 今天在写东西的时候,用到了多线程.遇到了个问题: 子线程的异常,在父线程中无法捕获. 解决 问题代码 问题代码示例代码如下: import threading class SampleThrea ...

  6. Linux 搭建svn版本库

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...

  7. 【转】Eclipse 如何添加Android SDK

      问题描述: 如何为Eclipse编程软件添加Android SDK功能,使其能进行Android开发. 解决方法: 软件版本:Eclipse 3.7,installer_r18-windows.e ...

  8. css3hover效果

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  9. python 线程与进程

    线程和进程简介 应用程序和进程以及线程的关系? 一个应用程序里可以有多个进程,一个进程里可以有多个线程 最原始的计算机是如何运行的? CPU是什么?为什么要使用多个CPU? 为什么要使用多线程? 为什 ...

  10. Java中线程的yield(),sleep()以及wait()的区别

    从操作系统的角度讲,os会维护一个ready queue(就绪的线程队列).并且在某一时刻cpu只为ready queue中位于队列头部的线程服务. 但是当前正在被服务的线程可能觉得cpu的服务质量不 ...