Webpack無法構建該專案，因為無法解決影像問題。
專案結構
project/
├──node_modules/
├──src/
│ ├──assets/
│ │ ├──影像/
│ │ ├── 樣式
├──package.json。
├──webpack.config.js。
這里是webpack.config.js
{
test: /..(JPG|gif|svg|gif|png)(?v=[0-9]. [0-9]. [0-9])?$/,
type: 'asset/resource'。
generator: {
filename: 'assets/images/[name].[contenthash:7][ext]'。
},
use: [{loader: 'url-loader'}]
},
和main.css
.bpromo {
background: url(./assets/images/bg.png) top no-repeat;
background-size: cover
}
錯誤資訊
ERROR in ./assets/css/main.css
模塊構建失敗（from ./node_modules/mini-css-extract-plugin/dist/loader.js）。
ModuleBuildError。Module build failed (from ../node_modules/css-loader/dist/cjs.js) 。
Error: Can't resolve './assets/images/bg. png' in '/home/path/to/project/src/assets/css'
uj5u.com熱心網友回復：
似乎url()應該接受一個字串作為引數 看這里
所以請在main.css中嘗試（并確保main.css中的bg.png檔案的相對路徑是正確的）：
。span class="hljs-selector-class">.b-promo {
background: url("./assets/images/bg.png") top no-repeat;
background-size: cover;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331510.html
標籤：