无法在 angular-cli 项目中使用 npm 包含 Bootstrap答案

【问题标题】：Unable to include Bootstrap using npm in angular-cli project无法在 angular-cli 项目中使用 npm 包含 Bootstrap
【发布时间】：2019-08-22 06:16:18
【问题描述】：

我正在尝试在 angular-cli 项目中包含使用 npm 的引导程序。使用 npm 下载后，我尝试通过在 styles.scss 中导入 bootstrap.scss 并在 angular.json 中包含 jquery 和 bootstrap.min.js 来使用它。

styles.scss

@import '~bootstrap/scss/bootstrap.scss';

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

在编译代码时，出现此错误。

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Can't resolve 'functions' in 'C:\EMS\prac-app\node_modules\bootstrap\scss'
    at doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:180:19)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn5 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:57:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\ModuleKindPlugin.js:23:37)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn1 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:24:1)

我到底错过了什么？

【问题讨论】：

请检查您在 NodeModules 中的引导 scss 路径，我认为它应该在 dist 文件夹中。你的路径将是“bootstrap/dist/scss/bootstrap.scss”
在styles.scss中：@import "node_modules/bootstrap/dist/scss/bootstrap.scss"
可能你应该考虑不使用普通的引导程序，因为 jquery 的设计不是为了在有角度的情况下正常工作。使用 ng-bootstrap.github.io/#/home 这是 angular whit out jquery 的引导程序。
这应该是@import "~bootstrap/scss/bootstrap";
我认为你做错了基于你的控制台错误./src/styles.css你正在将scss文件导入css请检查你的styles文件扩展名

标签： angular bootstrap-4 angular-cli

【解决方案1】：

看起来问题出在 CSS 文件的路径上，尝试更改文件路径，如下所示：

angular.json:

"styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../src/styles.css"
    ],

如果您忘记运行 npm install 可能会出现问题

【讨论】：

【解决方案2】：

尝试在scss文件中使用相对路径，去掉scss扩展：

@import '../node_modules/bootstrap/scss/bootstrap';

这对我有用

【讨论】：