即使在 angular.json 中有正确的路径，Angular 也会显示样式 scss 错误

Posted 2023-02-19

【中文标题】即使在 angular.json 中有正确的路径，Angular 也会显示样式 scss 错误

【英文标题】：Angular showing style scss error even with proper paths in angular.json

【发布时间】：2020-01-04 19:49:00

【问题描述】：

我正在尝试使用 bootstrap 并有 1 个 styles.scss 文件来编译它的所有 css。我已将这些路径添加到 angular.json 但仍然收到以下错误：

多 ./src/scss/styles.scss 中的错误 ./node_modules/bootstrap/dist/css/bootstrap.min.css 未找到模块： 错误：无法解析“/User/Project/src/scss/styles.scss” '/用户/项目'

我已经阅读了很多帖子，例如：

ENOENT: no such file or directory for node_modules\jquery\dist\jquery.min.js' angular2-cli gives @multi styles error

他们都指出，在 angular.json 文件中，路径基本上是绝对的。但是我已经进行了这些更改，请相信我输入的路径是正确的，但仍然会出现此错误。

关于我在这里做错了什么的任何提示？

Angular.json

"architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/expoapero-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/scss/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js"
            ],

错误消息中提到的两个文件的绝对路径：

src/scss/styles.scss node_modules/bootstrap/dist/css/bootstrap.css

【问题讨论】：

您确定该文件存在于 src/scss/styles.scss 中吗？如果是，你检查过代码中的错误吗？

该文件以该路径存在。我应该在代码中寻找什么样的错误？我在控制台和终端中看到的就是问题中的那个。我没有得到任何其他东西......

您可以尝试从文件中删除所有代码。或者，您可以尝试将文件移动到 src/styles.scss，并查看它是否从那里运行。从你所展示的它应该可以工作，所以我认为在其他地方还有一些东西。您也可以尝试创建一个 stackblitz 来共享和调试

如果你可以在 github 上分享你的代码，我很想看看

【参考方案1】：

首先，您需要检查您的 node_modules 文件夹。 默认情况下，引导程序不是。请检查 package.json 的

    "dependencies": 
...
    "bootstrap": "^<version_number>",
...

否则你需要通过以下命令安装引导程序：

npm install --save bootstrap

jQuery 也有类似的东西。

【讨论】：

我确实安装了引导程序，我可以在 node_modules 文件夹中找到它。它在 package.json 中也可见。

【参考方案2】：

首先

你在 node_modules 中看到 bootstrap 文件夹了吗？您是否已经安装了所需的软件包？

如果您修改了 angular.json，则安装后需要重新启动服务器

【讨论】：

我确实看到了 node_modules 中的引导文件夹和所需的包。每次修改 angular.json 时，我都会重新启动服务器。