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有关,如图
文件夹
文件夹
其中一个没有加下划线的左下角有箭头的标致,另一个是前面加了下划线还跟了版本号。于是把引用的地址改成:

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值