create-react-app 搭建的项目中,使用 CSS Modules:

修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文件:

                loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// 新增下面2行
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
},

CSS Modules 与 stylus 结合:

create-react-app引入stylus说明:http://www.cnblogs.com/cag2050/p/8889151.html

分别修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文件中,styl对应的处理部分,详见github项目。

让 CSS Modules 不作用于 node_modules 里的内容:

如果想开启css的css modules功能,就比较麻烦点;除了针对css开启css modules,还需要需要针对antd的css 单独写一条loader的规则,不开启 css modules。

参考:https://www.jianshu.com/p/51ff1c8be301

此项目中手动引入:import 'antd/dist/antd.css'

create-react-app 搭建的项目中,使用 CSS Modules的更多相关文章

  1. 在React中使用CSS Modules设置样式

    最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  4. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  5. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  6. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  7. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  8. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  9. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. SharePoint Framework 企业向导(六)

    博客地址:http://blog.csdn.net/FoxDave 接上一讲 部署SPFx解决方案 部署SPFx解决方案可以用两个步骤完成:1. 将脚本组件打成的包部署到一个CDN(内容分发网络) ...

  2. C#正则表达式MatchCollection类

    认识MatchCollection 类 表示通过以迭代方式将正则表达式模式应用于输入字符串所找到的成功匹配的集合. 命名空间:  System.Text.RegularExpressions 属性:C ...

  3. Oracle 12c中新建pdb用户登录问题分析

    Oracle 12c新建用户登录问题分析1 用sys用户新建用户,提示公用用户名或角色名无效.原因:Oracle 12c中,在容器中建用户(或者应该称为使用者),须在用户名前加c##.默认登录连接的就 ...

  4. ClientAsTemplate用法

    kbmMW提供了TkbmMWClientQuery查询组件,作为kbmMW开发者都知道,这是一个内存数据集,基于服务端的查询服务(Query Service),可以直接执行sql得取想要的记录,因为是 ...

  5. Python 实例变量

    class Person: def __init__(self, name, id, gender, birth): self.name = name # 实例变量 对象里的变量 self.id = ...

  6. [转]Hadoop家族学习路线图

    Hadoop家族学习路线图 Hadoop家族系列文章,主要介绍Hadoop家族产品,常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, ...

  7. 【c++基础】遍历目录并写入txt文件-linux

    前言 /****************************************************************************** * File: get_train ...

  8. Python之路PythonThread,第一篇,进程1

    python3 进程1 多任务编程: 可以有效的利用计算机资源,同时执行多个任务, 进程:进程就是程序在计算机中一次执行的结果: 进程和程序的区别: 程序是一个静态文件的描述,不占用计算机的系统资源: ...

  9. linux命令行总结给自己看的版本

    复制 cp -r /src /dst 查看硬盘容量 df -h 重命名: mv /原来的 /现在的

  10. Echarts 绘图(饼图,中国地图)

    一个使用Javascript 实现的开源可视化库,可以流畅的运行在pc 和移动设备上,兼容当前绝大部分浏览器(Chrome ,firefox,IE8)等 底层依赖轻量级的矢量图形库ZRender,提供 ...