在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实现列出数组中最长的连续数
Dec 29 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
详解node.js 事件循环
Jul 22 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php的curl封装类用法实例
2014/11/07 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Python实现句子翻译功能
2017/11/14 Python
python版飞机大战代码分享
2018/11/20 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
视图的作用
2014/12/19 面试题
优秀经理事迹材料
2014/02/01 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python实现老照片修复之上色小技巧
2021/10/16 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏