在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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP中的日期处理方法集锦
2007/01/02 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
openPNE常用方法分享
2011/11/29 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
分享php邮件管理器源码
2016/01/06 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
node网页分段渲染详解
2016/09/05 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python字典与json转换的方法总结
2020/12/28 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
经典婚礼主持词
2014/03/13 职场文书
环保倡议书
2014/04/14 职场文书
机关党员公开承诺书
2014/08/30 职场文书