[英]How to set up css-modules?
官方文档太复杂了,对我不起作用。 有谁知道任何好的文章,如何使用webpack设置css-modules
?
react-css-modules也没有帮助
更新
这是我的模块配置。 为了达到我的目标而对其进行了编辑,因此与原始版本有所不同。
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}, {
test: /\.png$/,
loader: 'file-loader?name=[name]--[hash].[ext]',
}
],
loaders: [{
test: /\.css/,
loader: 'style-loader!css-loader&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}, {
test: /\.html$/,
loader: 'file-loader',
}]
},
很简单
您需要样式加载器,css加载器并设置模块模式。
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
像那样。 其中[name]__[local]___[hash:base64:5]
表示webpack将为您生成的CSS类的结构。
我建议遵循此指南,真的很简单。 https://github.com/css-modules/webpack-demo
loaders: [{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
}],
在css-loader
您需要添加?
然后是modules
,依此类推。
在组件中,您需要导入样式:
import style from './App.css';
样式-只是具有与选择器匹配的属性的对象。
组件中的用法如下所示:
const App = props => (
<header className={style.header}>
<Link to="/" className={style.link}>Awesome blog</Link>
</header>);
App.css看起来像这样:
.header {
font-size: 35px;
text-align: center;
line-height: 1.3;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.