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

Posted 2023-03-06

【中文标题】模块错误（发出的值而不是错误的实例）

【英文标题】：Module Error (Emitted value instead of an instance of Error)

【发布时间】：2019-04-01 04:11:22

【问题描述】：

./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: Can't resolve '../../ 'C:\xampp\htdocs\projectA\postGrad-Frontend\src\scss' 中的 assets/images/login-bg.jpg'

为什么会抛出错误。 我的图像中出现的正确图像。 我尝试重建npm rebuild，但没有成功。

【参考方案1】：

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

【讨论】：

它有效，但为什么有效？ Scss 和 html 文件都在同一个文件夹中，因此它们应该使用相同的指向资产的路径。 （是的，该路径在 HTML 文件中有效）

使用它编译的斜线，但我在前端获得了 HTTP 404，因为它搜索上下文根之外的资源。在这种情况下我能做什么？ （角度 12）

【参考方案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;

文件路径的改变是关键： ~资产/

【参考方案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'

【参考方案4】：

解决方法是在路径的开头添加/： 例如：/assets/images/bg-1.png 其中 assets 位于根目录下的 src 文件夹