无法在 Angular 2 应用程序中添加引导程序

Question

I am trying to add the bootstrap class style.css file.When i am compiling the 
 application getting the below error.

style.css

@import "~bootstrap/dist/css/bootstrap.css";

**Myerror**

./node_modules/css-loader 中的错误？{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":错误}!./src/styles.css 模块构建失败：错误：无法解析 'F:\guna\dreamapp\src' 中的 '~bootstrap/dist/css/bootstrap.css' 在 onError (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:61:15) 在 loggingCallbackWrapper (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在 runAfter (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:158:4) 在 innerCallback (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:146:3) 在 loggingCallbackWrapper (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个 (F:\guna\dreamapp\node_modules\tapable\lib\Tapable.js:252:11) 在 F:\guna\dreamapp\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:40:4 在 loggingCallbackWrapper (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在 runAfter (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:158:4) 在 innerCallback (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:146:3) 在 loggingCallbackWrapper (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个 (F:\guna\dreamapp\node_modules\tapable\lib\Tapable.js:252:11) 在 innerCallback (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\Resolver.js:144:11) 在 loggingCallbackWrapper (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19) 在下一个 (F:\guna\dreamapp\node_modules\tapable\lib\Tapable.js:249:35) 在 resolver.doResolve.createInnerCallback (F:\guna\dreamapp\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:44:6) @ ./src/styles.css 4:14-138 @多./src/styles.css

Answer 1

导入引导程序的路径很可能有问题。我不知道直接从 CSS 导入它是否是一个好习惯，但这里是 Angular CLI 获取引导程序的方法：

npm install bootstrap@3 --save

然后在你的 .angular-cli.json 中：

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

注意：如果你想使用 Bootstrap 4 alpha，安装它：

npm install bootstrap@4.0.0-beta.2 --save

那么要导入的JS文件的名字就是bootstrap.bundle.min.js

Answer 2

这似乎是 Angular CLI 1.6.4 的错误尝试现在回滚到 1.6.3。

https://github.com/angular/angular-cli/issues/9080