react里面使用css module方式

我使用的是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;

}

转载于:https://www.cnblogs.com/drizzle-wen/p/8384547.html