CSS模块化,通过require引入样式这种方式,优点是:解决了命名冲突和全局污染的问题
如何使用:
1. 安装css-loader依赖
npm install style-loader css-loader -D
2. 配置webpack的css-loader
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]_[local]__[hash:base64:5]'
}
3.导入和使用
// footer.css
.footer {
background: #000;
padding-bottom: 5px;
color: #fff;
}
.footer h1 {
font-size: 16px;
}
// 导入css文件
var footerCss = require('../../css/footer.css')
export default class ComponentFooter extends React.Component{
render () {
console.log(footerCss)
return (
<footer className={footerCss.footer}>
<h1>footer</h1>
</footer>
)
}
}
4. 原理
将引入的css赋值给变量footerCss
,console出来为:{footer:"footer_footer__3nzVW"}
,使用类名footerCss.footer
时,由于webpack中的配置,clsss名自动转换为footer_footer__3nzVW
,使其唯一。