在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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
实现vuex原理的示例
Oct 21 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python正则表达式match和search用法实例
2015/03/26 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python实现两张图片的像素融合
2019/02/23 Python
python基于property()函数定义属性
2020/01/22 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
工作的心得体会
2013/12/31 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题