我正试图将Bootstrap添加到我的Angular应用程序中。我是一个新手,虽然按照要求的步骤,我遇到了安装bootstrap的问题。
我做了所有必要的步骤,包括安装Angular cli、ng new first-app和ng serve。
我打开VS代码终端,尝试用以下方法安装bootstrap。
npm install bootstrap --save
然后在style.css中添加以下内容
@import "~bootstrapdistcssbootstrap.css"
但是,当我点击悬停在上面一段代码上的链接时,它仍然说无法定位文件,并提示用这个路径创建一个文件。
如果你只是想添加bootstrap的样式,在angular.json文件中有一个属性,允许你在构建中包含它。
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"projects": {
"yourproject": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
},
...
请看。https:/angular.ioguideworkspace-config#styles-and-scripts-configuration。
欢迎来到StackOverflow!
Bootstrap不是TypeScript代码,所以你不需要导入它。 相反,它是CSS代码,因此你要在你的 index.html
文件作为`
下面是我如何在我的应用程序中导入boostrap--下面的内容进入了 <head>
的标签 index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
这样我就可以在我的任何代码模板中使用Bootstrap。
另外,这段代码会链接到4.3.1版本--如果你想链接到不同的版本,你可以到 https:/getbootstrap.com。 并获得一个 "新鲜 "的链接--这个网站对你使用CDN链接很有帮助。
但我看到你想把它导入到你的style.css文件中,所以你很可能要使用一个相对路径,可能是这样的。
@import "../node_modules/bootstrap/dist/css/bootstrap.css";
添加bootstrap的一个简单方法是使用Angular CLI(npm install)。
从命令行界面安装bootstrap,并在angular.json中引用它。
npm install bootstrap --save