在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 iframe内的函数调用实现方法
Jul 19 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
js右键菜单效果代码
2007/07/21 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python functools模块学习总结
2015/05/09 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
tornado+celery的简单使用详解
2019/12/21 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
大学生自荐材料范文
2014/12/30 职场文书
学校远程教育工作总结
2015/08/11 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
python字典进行运算原理及实例分享
2021/08/02 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android