在Create React App中使用CSS Modules的方法示例


Posted in Javascript onJanuary 15, 2019

前提条件

请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g

先使用 create-react-app 命令下载一个脚手架工程,安装命令:

# 使用 npx
$ npx create-react-app my-app

# 使用 npm 
$ npm init npx create-react-app my-app

# 使用 yarn
$ yarn create react-app my-app

运行项目

$ cd my-app

# 使用 npm
$ npm start

# 或者使用yarn
# yarn start

在浏览器中输入 http://localhost:3000 查看项目效果

使用 CSS Module 的第一种方式

create-react-app 中内置了使用 CSS Modules 的配置,当前方式就是使用 create-react-app 内置的用法

方式

将所有的 .css/.lee/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等。即可使用 CSS Modules 的方式进行引入使用了。

用法

编写一个 css 文件:Button.module.css

.error {
  background-color: red;
}

在编写一个普通的 css 文件:another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式进行引用:Button.js

import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
 render() {
  // reference as a js object
  return <button className={styles.error}>Error Button</button>;
 }
}

在浏览器中查看效果

此时 Button 组件的背景颜色是红色,但是字体颜色却不是红色,因为使用了 Css Modules 之后,普通的 css 样式就不起效果了,需要用全局的方式编写才可以(:global)。 最后添加到元素上的样式结果为: <button class="Button_error_ax7yz">Error Button</button>

使用 CSS Module 的第二种方式

方式

在命令行运行 npm run eject 命令

此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆

运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到 test: cssRegex 这一行

在 use 属性执行的方法中添加 modules: true ,如下图:

在Create React App中使用CSS Modules的方法示例 

用法

和第一种方式的用法一致,只是不需要在 css 文件后面加 .module 后缀了

编写一个 css 文件:Button.css

.error {
  background-color: red;
}

再编写一个普通的 css 文件:another-stylesheet.css

.error {
  color: red;
}

在 js 文件中使用 CSS Modules 的方式进行引用:Button.js

import React, { Component } from 'react';
import styles from './Button.css'; // 可以直接使用 CSS Modules 的方式引入了
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
 render() {
  // reference as a js object
  return <button className={styles.error}>Error Button</button>;
 }
}

在浏览器中查看效果

此时 Button 组件的背景颜色是红色,但是字体颜色却不是红色,因为使用了 Css Modules 之后,普通的 css 样式就不起效果了,需要用全局的方式编写才可以(:global)。 最后添加到元素上的样式结果为: <button class="Button_error_ax7yz">Error Button</button>

如想使用第二种方式对 sass 和 less 也使用 CSS Modules 的方式进行引用,则类似的在 sass 和 less 解析配置上也添加modules: true 即可。

注意

默认 create-react-app 脚手架不能直接使用 sass 和 less 直接编写 css,需要先进行相应配置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
js解决movebox移动问题
Mar 29 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Preload基础使用方法详解
Feb 03 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
Vue 样式绑定的实现方法
Jan 15 #Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 #Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
You might like
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
php常用的安全过滤函数集锦
2014/10/09 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
Javascript实现单例模式
2016/01/24 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python中获取对象信息的方法
2015/04/27 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python读写文件基础知识点
2019/06/10 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python实现字符串和数字拼接
2020/03/02 Python
Python接口自动化测试的实现
2020/08/28 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
新领导上任欢迎词
2014/01/13 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
辞职信标准格式
2015/02/27 职场文书