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;

}