使用bootstrap样式库来书写HTML页面时,发现在angular.json中引入了bootstrap全局css样式:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.css"
]
但是发现页面没有加载任何bootstrap样式,而且也没有报错,能正常启动。
经过多番排查,发现node_modules中有有两个文件夹跟bootstrap有关,如图
其中一个没有加下划线的左下角有箭头的标致,另一个是前面加了下划线还跟了版本号。于是把引用的地址改成:
"styles": [
"src/styles.css",
"node_modules/_bootstrap@4.1.3@bootstrap/dist/css/bootstrap.css"
]
发现页面样式生效了。在网上找了下原因:原来使用淘宝的npm镜像cnpm,使用cnpm install命令安装模块时,下载的带下划线,带@符号的才是文件的真身,bootstrap文件夹只是真身的快捷方式。所以我们只要在angular.json文件中,使用实际地址,而非快捷方式就可以解决样式不起作用的问题了