Can'；t解决'/images/bg.jpg'；将css加载程序更新为v4后

css加载器的版本是3.5.3，我的应用程序运行良好。将其更新为4.3.0，现在我得到以下编译错误。在查看v4升级所固有的“突破性变化”时，我很难找出原因

可能与我在.scss文件中使用url有关，其中只存在对/images/bg.jpg的引用？我有一个styles.scss文件，它导入一个“\u box-layout.scss”文件，其中包含：

.box-layout {
  align-items: center;
  background: url('/images/bg.jpg');
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

编译错误：

ERROR in ./src/styles/styles.scss
Module build failed (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 '/images/bg.jpg' in 'C:\Users\gwich\dev\javascript\react\rental-props\src\styles'
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\Resolver.js:209:21
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\gwich\dev\javascript\react\rental-props\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\gwich\dev\javascript\react\rental-props\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\gwich\dev\javascript\react\rental-props\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\gwich\dev\javascript\react\rental-props\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\gwich\dev\javascript\react\rental-props\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.loader (C:\Users\gwich\dev\javascript\react\rental-props\node_modules\css-loader\dist\index.js:154:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
 @ ./src/app.js 13:0-30
 @ multi babel-polyfill ./src/app.js

---

多亏了我的努力，我终于解决了这个问题

首先，我安装了

url加载器

npm install url-loader --save-dev

接下来，我更新了规则部分中我的

webpack.config.js

文件中背景url的路径（图像位于

/public/images/bg.jpg

，而我的

\u box-layout.scss

文件位于

/src/styles/components/imported by/src/styles/styles.scss

）：

最后，我更新了我的

\u box-layout.scss

文件：

.box-layout {
  align-items: center;
  background: url('../../public/images/bg.jpg');
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

  rules: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader'
    },

.box-layout {
  align-items: center;
  background: url('../../public/images/bg.jpg');
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}