要解决babel-plugin-react-css-modules不支持背景图片的问题,可以使用postcss-loader和postcss-modules插件来处理背景图片。
首先,确保已安装postcss-loader和postcss-modules插件:
npm install postcss-loader postcss-modules --save-dev
然后,在webpack配置文件中的loader中添加postcss-loader,并指定postcss-modules插件:
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-modules',
{
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
]
]
}
}
}
]
},
// 其他loader规则...
]
}
接下来,在babel配置文件中添加plugins配置项,将react-css-modules插件替换为postcss-modules插件:
module.exports = {
presets: [
// 其他preset...
[
'@babel/preset-react',
{
plugins: [
[
'react-css-modules',
{
context: './src',
exclude: 'node_modules',
webpackHotModuleReloading: true
}
]
]
}
]
]
};
现在,babel-plugin-react-css-modules将被postcss-modules插件替代,这样就支持背景图片了。
上一篇:babel-plugin-named-asset-import是做什么的?
下一篇:babel-plugin-react-css-modules将styleName转换为className,但是css文件中的类名没有改变。