如何将bootstrap连接到angular7？ [英] How do I connect bootstrap to angular7?

问题描述

在app.compomnet.html中我使用了入门模板代码https://getbootstrap.com/docs/4.3/examples/starter-template/



2-我在终端安装bootstrap4npm我bootstap @ 4 --save



3-我将此引用添加到style.css



4- in style.css'@ import'〜/ bootstrap / dist / css / bootstrap.css'



5-我试图键入'ng s --o'发生此错误。



[！[终端中的错误消息] [1]] [1]第二条错误消息< br $>


我试图检查style.css中的代码是否正确@ import'〜/ bootstrap / dist / css / bootstrap.css'任何人都可以详细说明错误



[1]：行中的错误信息



./src/styles.css中的错误（ ./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles。 css）模块构建失败（来自./node_modules/postcss-loader/src/index。 js）：错误：ENOENT：没有这样的文件或目录，在Object.readFileSync（fs。）上的Object.openSync（fs.js：438：3）打开'\ bootstrap \dist \css \ bootstrap.css'。 js：343：35）在CachedInputFileSystem.readFileSync（D：\ shopping-）的Storage.provideSync（D：\ shopping-cart \\\
ode_modules \enhanced-resolve \lib \ CacheInputFileSystem.js：98：13）在Observable.rxjs_1.Observable.obs [as _subscribe]（D：\ shopping-cart\\\
ode_modules @ ngtools\webpack）中的cart \\\
ode_modules \enhanced-resolve \lib \ CacheInputFileSystem.js：259：32）在Observable的Observable._trySubscribe（D：\ shopping-cart \\\
ode_modules \ rxjs \ internal \ Observiable.js：44：25）中\ src; \\ _webpack-input-host.js：35：51） .subscribe（D：\ shopping-cart \\\
ode_modules \ rxjs \ internal \ Observable.js：30：22）在SyncDelegateHost._doSyncCall（D：\ shopping-cart\\\
ode_modules @ angular-devkit \ core\src\virtual-fs\host\sync.js： 22:20）在WebpackCompilerHost的SyncDelegateHost.read（D：\ shopping-cart\\\
ode_modules@angular-devkit\core\src\virtual-fs\host\sync.js：49：21）。 virtualFileSystemDecorator.readFile上的readFileBuffer（D：\ shopping-cart \\\
ode_modules@ngtools\webpack\src\compiler_host.js：125：44）（D：\ shopping-cart\\\
ode_modules @ ngtools\webpack \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ webpack-configs\styles.js:47:35）在Object.load的新Promise（）处（D：\ shopping-cart\\\
ode_modules @ angular-devkit\build-angular\src\angular-cli） -files\models\webpack-configs\styles.js:46:28）在Promise的loadImportContent（D：\ shopping-cart\\\
ode_modules\postcss-import \ index.js：236：34） .all.resolved.map.file（D：\ shopping-cart \ node_modules \po stcss-import \ index.js：210：18）[0m





我尝试了什么：



我试图复制并粘贴bootstrab inscripts文件的路径，错误仍然存​​在

解决方案

< blockquote> Angular 7和Bootstrap 4样式入门 [ ^ ]

in "app.compomnet.html " I use a starter template code https://getbootstrap.com/docs/4.3/examples/starter-template/

2- I installed bootstrap4 "npm I bootstap@4 --save " in terminal

3- I add this references into style.css

4- in style.css '@import'~/bootstrap/dist/css/bootstrap.css'

5- I tried to type 'ng s --o 'this error occurred .

[![error message in terminal ][1]][1] 2nd error message

I tried to check if the code in style.css is correct or not "@import'~/bootstrap/dist/css/bootstrap.css' can anyone elaborate error

[1]: error message in lines

ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: ENOENT: no such file or directory, open '\bootstrap\dist\css\bootstrap.css' at Object.openSync (fs.js:438:3) at Object.readFileSync (fs.js:343:35) at Storage.provideSync (D:\shopping-cart\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13) at CachedInputFileSystem.readFileSync (D:\shopping-cart\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:259:32) at Observable.rxjs_1.Observable.obs [as _subscribe] (D:\shopping-cart\node_modules@ngtools\webpack\src\webpack-input-host.js:35:51) at Observable._trySubscribe (D:\shopping-cart\node_modules\rxjs\internal\Observable.js:44:25) at Observable.subscribe (D:\shopping-cart\node_modules\rxjs\internal\Observable.js:30:22) at SyncDelegateHost._doSyncCall (D:\shopping-cart\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:22:20) at SyncDelegateHost.read (D:\shopping-cart\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:49:21) at WebpackCompilerHost.readFileBuffer (D:\shopping-cart\node_modules@ngtools\webpack\src\compiler_host.js:125:44) at VirtualFileSystemDecorator.readFile (D:\shopping-cart\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:39:54) at Promise (D:\shopping-cart\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\styles.js:47:35) at new Promise () at Object.load (D:\shopping-cart\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\styles.js:46:28) at loadImportContent (D:\shopping-cart\node_modules\postcss-import\index.js:236:34) at Promise.all.resolved.map.file (D:\shopping-cart\node_modules\postcss-import\index.js:210:18)[0m


What I have tried:

I tried to copy and paste the path of bootstrab inscripts file nut the error is still exist

解决方案

Getting Started with Angular 7 and Bootstrap 4 Styling[^]

这篇关于如何将bootstrap连接到angular7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！