CSS Modules 关于CSS模块化的方法 基于React
2016-05-21 19:21
429 查看
之前一直困惑如何实现CSS的模块化,特别是在使用了react之后,CSS的全局变量思想和React的组件化设计思想产生了严重冲突。之前也接触过一点react
native的样式控制,类似Radium,jsxstyle,react-style,此类方法直接放弃css而通过js来控制样式,也是一种不错的解决方案,但是用了此方法之后,css的预处理器就无法使用了。下面是最近找到的一个特别优秀的解决CSS模块化的方法(依旧使用CSS处理)。
CSS Modules
使用起来很简单,只要会使用webpack就可以立马上手CSS Modules,在webpack配置文件里面设置如下:
//此处可将类名设置成特定格式
我们随便写一个CSS文件
//style.css
//entry.js
另外,命名方式最好使用驼峰命名法,在JS中只能使用styles["btn-sp"]来调用.btn-sp而不能使用 styles.btn-sp来调用,这里需要注意一下。
CSS Modules 的GitHub链接参考文章:简单易懂的CSS Modules
native的样式控制,类似Radium,jsxstyle,react-style,此类方法直接放弃css而通过js来控制样式,也是一种不错的解决方案,但是用了此方法之后,css的预处理器就无法使用了。下面是最近找到的一个特别优秀的解决CSS模块化的方法(依旧使用CSS处理)。
CSS Modules
使用起来很简单,只要会使用webpack就可以立马上手CSS Modules,在webpack配置文件里面设置如下:
module: { loaders: [{ test: /\.css$/, loader: 'style!css?modules' }] }在css-loader里面就可以使用CSS Modules,后来才知道CSS Modules是一个后来才并入css-loader的功能。
{ test: /\.css$/, loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]' }
//此处可将类名设置成特定格式
我们随便写一个CSS文件
//style.css
.hello{ color:red; }
//entry.js
import styles from './style.css'; import React, { Component } from 'react'; export default class ScopedSelectors extends Component { render() { return ( <p className={ styles.hello }>Scoped Selectors</p> ); } };
另外,命名方式最好使用驼峰命名法,在JS中只能使用styles["btn-sp"]来调用.btn-sp而不能使用 styles.btn-sp来调用,这里需要注意一下。
CSS Modules 的GitHub链接参考文章:简单易懂的CSS Modules
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- [div+css]晒晒最新制作专题推广页模板
- html5 web数据存储
- SEO
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制:7 行代码学会 co 模块