angular6使用angular-cli构建项目,引用bootstrap样式无效

使用bootstrap样式库来书写HTML页面时,发现在angular.json中引入了bootstrap全局css样式:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css"
]

但是发现页面没有加载任何bootstrap样式,而且也没有报错,能正常启动。
经过多番排查,发现node_modules中有有两个文件夹跟bootstrap有关,如图
angular6使用angular-cli构建项目,引用bootstrap样式无效_第1张图片
angular6使用angular-cli构建项目,引用bootstrap样式无效_第2张图片
其中一个没有加下划线的左下角有箭头的标致,另一个是前面加了下划线还跟了版本号。于是把引用的地址改成:

"styles": [
    "src/styles.css",
    "node_modules/_bootstrap@4.1.3@bootstrap/dist/css/bootstrap.css"
]

发现页面样式生效了。在网上找了下原因:原来使用淘宝的npm镜像cnpm,使用cnpm install命令安装模块时,下载的带下划线,带@符号的才是文件的真身,bootstrap文件夹只是真身的快捷方式。所以我们只要在angular.json文件中,使用实际地址,而非快捷方式就可以解决样式不起作用的问题了

你可能感兴趣的:(bug小记)