CSS Modules 用法 地址:阮一峰博客教程
一、案例 https://github.com/ruanyf/css-modules-demos
$ git clone https://github.com/ruanyf/css-modules-demos.git
二、配置 webpack.config.js。
module.exports = {
entry: __dirname + '/index.js',
output: {
publicPath: '/',
filename: './bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
// {
// test: /\.css$/,
// loader: "style-loader!css-loader?modules"
// },
//
{
// 这里是匹配的文件名称(此处假设我需要 scopedcss 的 css文件: a.scopedcss)
test: /\.scopedcss$/,
loader: "style-loader!css-loader?modules" // 这里是使用对用的loader处理
},
]
}
};
标签加入样式
查看控制台打印
三、自定义编译后的样式哈希值
{
test: /\.scopedcss$/,
loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]123456789"
},