在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 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHP 万年历实现代码
2012/10/18 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
Python 转义字符详细介绍
2017/03/21 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python自定义线程类简单示例
2018/03/23 Python
python生成lmdb格式的文件实例
2018/11/08 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python列表对象实现原理详解
2019/07/01 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
公司授权委托书
2014/04/04 职场文书
经典演讲稿汇总
2014/05/19 职场文书
个人合伙协议书范本
2014/10/14 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python