ng 在 Angular 应用程序中添加新的 SCSS 样式时出现服务错误

Question

我使用 CLI 创建了一个全新的 Angular 应用程序。

我选择 SCSS 作为样式表选择。

我输入 ngserve 来运行应用程序。

此时一切正常。

我打开样式表并添加任何样式

例如

body {
  background-color: red;
}

网站现在无法构建，控制台窗口中出现以下错误：

错误：./src/app/pages/myMod.module.ts 模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）： NonErrorEmissedError：（发出值而不是 Error 实例） 错误：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js): SassError: 预期为“{”。 ╷ 12 │ 身体

如果我退出 ng 服务并再次启动它，它就可以工作了。

但是一旦我添加新的 css 规则，它就会失败。

这是最新版本的 Node js，CLI 也是最新的。

Answer 1

可能有几件事：

-您是否使用 hmr（热模块替换）在每次更改项目时重新编译项目，您可以在您的环境中配置它，然后使用以下命令启动它：

ng serve --hmr

（此处的文档：https://angular.io/cli/serve）

• 当项目重新编译时（通过 ngserve live reload），你的 SCSS 可能会被忽略，你可以检查一下原因。

• 你的SCSS是如何导入的？它是组件的一部分吗？是否以更全局的方式声明或导入（例如通过 angular.json）

Answer 2

如果 NG 服务没有检测到 angular.json 中提供的 SCSS 文件的更改，只需删除 .angular 目录

rm .\.angular\