webpack - babel-plugin-react-css-modules 不支持背景图片
问题描述
使用 css-modules 后,scss 中的 background-image 将不起作用。
请问,如何正确配置?
回购:https ://github.com/pdsuwwz/Antd-app
错误:
ERROR in ./src/script/components/redux-test/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/black-coffee.png' in '/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/src/script/components/redux-test'
at factory.create (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/Compilation.js:821:10)
at factory (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
at resolver (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
at asyncLib.parallel (/Users/admin/Documents/zhike/github/myRepository/Antd-test/Antd-app/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
.babelrc:
...
["babel-plugin-react-css-modules", {
"generateScopedName": "[name]_[local]_[hash:base64:5]",
"webpackHotModuleReloading": true,
"filetypes": {
".scss": {
"syntax": "postcss-scss"
}
}
}]
...
scss:
.test-relativeimg{
width: 200px;
height: 200px;
background-image: url("./assets/black-coffee.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
网页包
{
test: /\.scss/,
use: [MiniCssExtractPlugin.loader, "css-loader?modules&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]", {
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
config: {
path: resolve('postcss.config.js')
}
},
},
"sass-loader"],
exclude: resolve('node_modules'),
include: resolve('src')
}
postcss.config.js
module.exports = {
plugins: [require("autoprefixer")({
browsers: ['last 2 versions']
}), require("cssnano")()]
}
解决方案
推荐阅读
- jenkins - Jenkins:将用户定义的变量传递给 Email-Ext 插件
- angular - 在同一域上托管 2 个应用程序(Angular 和 Neuroglancer)
- php - 从请求中删除特定的嵌套数组键
- php - Laravel Datatables 在添加额外列时出现 net::ERR_EMPTY_RESPONSE 错误
- android - 在 Androidx 中使用 recyclerView 显示来自 Firebase 实时数据库的图像
- java - 协议有问题。MinecraftPing 类
- pip - hpbandster 和 ConfigSpace 安装失败
- mysql - 当您不设置时,docker 容器 mysql-server 中的默认密码是什么?
- python - Chromedriver 文本文件忙
- docker - 除了 runC,containerd 还支持哪些运行时?