Angular中使用bootstrap样式
Angular中引入bootstrap的方法
?
方法1：在Angular.json中的styles数组中添加bootstrap路径
如下所示：
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]这里需要注意路径问题，不同Angular版本下，Angular.json的位置可能有所不同，因此对应的路径也有可能需要作出修改。
?
方法2:通过在styles.css中使用@import 进行引入。
由于styles.css是整个项目的全局样式，因此可以在这里通过@import直接引入，也能够全局生效，这里同样需要注意路径问题。
路径中不需要带node_modules
@import 'bootstrap/dist/css/bootstrap.min.css'
?
Angular中引入bootstrap不生效的解决办法
在进行Angular开发时，使用了bootstrap样式。发现bootstrap的样式无法生效。引用方式如下：
在Angular.json中修改styles数组，
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]仔细检查路径后发现没有问题，但是样式总是无法生效。查看控制台发现元素没有bootstrap的样式。说明bootstrap没有生效。然后在node_module中查找发现bootstrap文件夹下面是空的。里面根本没有dist文件，也就不存在css样式了。相反查找到一个跟bootstrap相关的文件：
[email protected]@bootstrap/dist/css/bootstrap.min.css这个文件里面具有各种css样式设置。因此，我们尝试了将这个文件进行了引入。
"styles": [
"src/styles.css",
"./node_modules/[email protected]@bootstrap/dist/css/bootstrap.min.css"
]最后发现bootstrap样式果然生效了。通过在网上查找发现：原来使用淘宝的cnpm进行模块安装时，最终带下划线带@符号的才是模块文件，其他的文件夹只是模块文件的快捷方式。所以我们如果要引用第三方模块，必须引入带下划线的模块，而不能使用快捷方式。
参考文章：
angular6使用angular-cli构建项目，引用bootstrap样式无效
原文地址：https://www.cnblogs.com/yinhaiying/p/11180025.html
时间： 2024-08-17 21:44:55