在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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
纯js实现动态时间显示
Sep 07 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
js实现简易点击切换显示或隐藏
Nov 29 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
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
python爬虫面试宝典(常见问题)
2018/03/02 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
电子商务求职信
2014/06/15 职场文书
关键在于落实心得体会
2014/09/03 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL