首页 > 解决方案 > 当我尝试将我的 Angular 应用程序部署到 heroku 时,在 multi ./src/styles.scss 中出现错误

问题描述

当我尝试将我的 Angular 应用程序部署到 heroku 时,我遇到了一个奇怪的错误。

我尝试在 angular.json 中切换样式路径,但这似乎无法解决问题。我很确定这是一个路径问题,但我似乎无法解决它。

这表明我已将其从“sass 切换到 scss”

"@schematics/angular:component": {"style": "scss"}

这是我目前的道路

"styles": ["src/styles/global/global-styles.scss"]

这是我的 global-styles.scss

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.css";

我希望将其构建到heroku,但它被拒绝并给了我这个错误:

remote: ERROR in multi ./src/styles.scss ../node_modules/font-awesome/css/font-awesome.css
remote: Module not found: Error: Can't resolve '/tmp/node_modules/font-awesome/css/font-awesome.css' in '/tmp/build_e2cd2f4e9e4c7e4749537f06bef83c35'

标签: node.jsangularecmascript-6sasssingle-page-application

解决方案


我相信问题出在这几行

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.css";

您的产品源代码找不到 node_modules 文件夹包含这 2 个包。所以我建议你在 angular.json 中包含类似这样的 css

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css"
],

推荐阅读