使用 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")()]
}