模块错误（来自 ./node_modules/postcss-loader/src/index.js）：（发出值而不是错误实例）CssSyntaxError

Question

我正在关注 Angular coursera 上的课程我使用 npm install font-awesome@latest --save

安装了 font-awesome

然后我在 src 文件夹中添加了一个名为 _variables.scss 的新文件含

$fa-font-path : '../node_modules/font-awesome/fonts';

并添加到 styles.scss 文件

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

尽管我们有相同的代码，但我有这个错误

Answer 1

我不知道它是否可以解决您的问题，但我遇到了类似的错误，这对我有用。

我的 angular 项目中的部分文件层次结构

/node_modules <--useful for the app project
/projects
-/my-lib-name
--/node_modules <-- useful for my library
---/fontawesome
--/src
---/lib
----/components
-----/my-component
------my-component.component.scss

my-component.component.scss [之前]

$fa-font-path: "../../../../node_modules/font-awesome/fonts";

我改变了

my-component.component.scss [之后]

$fa-font-path: "~font-awesome/fonts";

我在 my-lib-name

的 ng-package.json 中的 styleIncludePaths 中添加了 node_modules

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-lib-name",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": ["node_modules"]
  }
}

Answer 2

我使用的是最新版本的 Angular (11.0.6)，而不是本课程中使用的版本 (6.2.1)。

我遇到了一些版本差异，为了解决这个问题，我将 _variables.scss 中的变量路径切换为

$fa-font-path : '~/node_modules/font-awesome/fonts';

这让我摆脱了那个错误，现在也显示了 FontAwesome 图标。

模块错误（来自 ./node_modules/postcss-loader/src/index.js）：（发出值而不是错误实例）CssSyntaxError

Module Error (from ./node_modules/postcss-loader/src/index.js): (Emitted value instead of an instance of Error) CssSyntaxError

npm

font-awesome

angular