码迷,mamicode.com
首页 > Web开发 > 详细

react里面使用css module方式

时间:2018-01-30 17:08:01      阅读:1016      评论:0      收藏:0      [点我收藏+]

标签:ade   pack   webpack   rand   使用   module   hash   creat   ext   

我使用的是create-react-app创建的项目,用的webpack2,在里面更改配置

{
test: /\.css$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]",
getLocalIndet: (
context,
localIdentName,
localName,
options
) => {
return "whatever_random_class_name";
}
}
}就可以了,
然后在你的jsx引用对应的css,
例如:
import footerStyle from "../../css/footer.css";
 
<div className={footerStyle.footIcon}>
 
footIcon是你引用的footer.css里面定义的样式
如 .footIcon{
height:10px;
width:10px;
}

react里面使用css module方式

标签:ade   pack   webpack   rand   使用   module   hash   creat   ext   

原文地址:https://www.cnblogs.com/drizzle-wen/p/8384547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!