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. C++类构造函数初始化列表(转)

    构造函数初始化列表以一个冒号开始,接着是以逗号分隔的数据成员列表,每个数据成员后面跟一个放在括号中的初始化式.例如: { public:     int a;     float b;     //构 ...

  2. linux 下ftp几种上传和下载方式

    1. ftp自动登录批量下载文件. 复制代码代码如下: #####从ftp服务器上的/home/data 到 本地的/home/databackup#####!/bin/bashftp -n<& ...

  3. 20165326 java第五周学习笔记

    第五周学习笔记 ch7 内部类(&外嵌类) 内部类的类体不可以声明类变量和方法 内部类如同类的变量或方法 内部类和外嵌类在编译时生成两个class文件 匿名类 某个类的一个子类没有明显的用类声 ...

  4. display总结 overflow知识

    # display总结:# inline总结: # 1.同行显示, 就相当于纯位文本, 当一行显示不下, 如就是一字显示不下, 那么显示不下的那个字会自动换行;# 和纯文本的区别就是有纯文本的概念, ...

  5. 【Python】sql-内连接,左连接,右连接,union

    内连接: mysql> select * from book_wangjing as book_1 inner join user_wangjing as user_1 on book_1.id ...

  6. zookeeper在Dubbo中扮演了一个什么角色

    作者:guxiangfly链接:https://www.zhihu.com/question/25070185/answer/188238271来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  7. 【转载】 996,谁的ICU?

    原文地址: https://baijiahao.baidu.com/s?id=1629803937354992525&wfr=spider&for=pc --------------- ...

  8. php算法面试案例(转)

    有5个人偷了一堆苹果,准备在第二天分赃.晚上,有一人遛出来,把所有菜果分成5份,但是多了一个,顺手把这个扔给树上的猴了,自己先拿1/5藏了.没想到其他四人也都是这么想的,都如第一个人一样分成5份把多的 ...

  9. Ubuntu16.04通过GPT挂载硬盘

    一般而言,服务器上挂载的硬盘都是比较大的,传统的对硬盘进行分区需要在终端敲sudo fdisk进行操作,但是, 当挂载的硬盘的容量大于2T的时候,是无法通过sudo fdisk进行挂载的,这个时候必须 ...

  10. kali的安装

    https://www.youtube.com/watch?v=sB3bchzlwio 注意视频中选择的是kali 2016.2版本, 在VMware中选择了Linux-Debian 8.*64(好像 ...