在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下4个跨浏览器必备的函数
Mar 07 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
easyui validatebox验证
Apr 29 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Angular2库初探
2017/03/01 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python处理中文编码和判断编码示例
2014/02/26 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python 函数基础知识汇总
2018/03/09 Python
python 循环数据赋值实例
2019/12/02 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
环保倡议书范文
2014/05/12 职场文书
人事任命书格式
2014/06/05 职场文书
课内比教学心得体会
2014/09/09 职场文书
场地使用证明模板
2014/10/25 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
销售2014年度工作总结
2014/12/08 职场文书
综治目标管理责任书
2015/05/11 职场文书
python实现简易名片管理系统
2021/04/11 Python
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python