Question

我试图在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)

我在这里到底想念什么？

Answer 1

尝试在scss文件中使用相对路径并删除scss扩展名：

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

这对我有用

Answer 2

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

angular.json：

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

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

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

2 个答案: