模块错误（发出的值而不是错误的实例）

Question

./src/scss/styles.scss 中的错误 (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref- -15-3!./src/scss/styles.scss) 模块错误（来自 ./node_modules/postcss-loader/lib/index.js）：（发出值而不是错误实例）CssSyntaxError: C:\xampp \htdocs\projectA\postGrad-Frontend\src\scss\pages\login.scss:6:13: 无法解析 '../../assets/images/login-bg.jpg' in 'C:\xampp' \htdocs\projectA\postGrad-Frontend\src\scss'

为什么它会抛出错误。我的图像中存在正确的图像。我尝试重建npm rebuild但没有运气。

Answer 1

刚刚/在 my 中添加了单斜杠，background:url(/../../assets)并且按照文档按预期工作，这意味着它将从current path.

Answer 2

从此替换路径：

@font-face {
  font-family: 'Effra';
  src: url('assets/fonts/Effra_W_It.ttf') format("truetype");
  font-weight:400;
  font-style: italic;
}

对此：

@font-face {
  font-family: 'Effra';
  src: url("~assets/fonts/Effra_W_It.ttf") format("truetype");
  font-weight:400;
  font-style: italic;
}

文件路径的更改是关键： ~assets/

Answer 3

在将应用程序从 Angular 8 升级到 Angular 10 后，我在构建 Angular CLI 应用程序时收到了类似的错误。组件使用的 scss 文件具有文件夹中图像的路径assets（例如assets/images/test.jpg）。该图像路径在 Angular 8 中有效（例如assets/images/test.jpg），但在升级后不起作用。构建将中断并出现以下错误，因为它正在查找相对于组件所在当前目录的图像文件。该文件也不会显示在页面上。我更改了相对于组件文件夹的路径，从而../../../../assets/images/test.jpg解决了问题。

错误：(Emitted value instead of an instance of Error) CssSyntaxError: C:\myproject\my.component.scss:10:12: Can't resolve './assets/images/test.jpg'