启动angular项目时,样式有问题
angular6使用angular-cli构建的项目,启动时引用bootstrap样式无效。
前言:昨天在公司升级把项目从angular4 升级到 angular6,很顺利,今天趁着双休日,升级下家里本本的项目,确保家里和公司环境一样,以便日后维护项目方便。(我有一篇博客是专门介绍升级angular-cli,这里不做介绍)
问题来了:升级还算顺利,当我ng serve 时,出问题了。
最直观就是样式有问题。
首先定位到是哪个样式有问题,简单一看:是项目中的bootstrap样式没有引用上。如果跟我是同问题请继续往下看:
开始找原因:
1.bootstrap样式的引用是在angular.json中配置,先检查路径配置是否有问题,到node_modules下看是否存在引用的文件。
"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.css" ]
我的是这样配置的,路径也是存在的,为什么引用不上呢?其他的报错也没有,奇怪中...
2.重点来了:有一个问题很奇怪,在node_modules 中 发现有两个跟bootstrap 相关的文件夹,如下图:
于是把引用的地址改成
"styles": [ "src/styles.css", "node_modules/_bootstrap@4.1.3@bootstrap/dist/css/bootstrap.css" ]
发现bootstrap样式引用上了。
3.是不是很开心,接下来 说一下原因:
首先: 我是用cnpm install命令安装的模块,家里网实在太烂,大家知道 cnpm 淘宝镜像嘛
原来使用淘宝的npm镜像cnpm,使用cnpm install命令安装模块时,下载的带下划线,带@符号的才是文件的真身, bootstrap文件夹只是真身的快捷方式。
记录此问题,希望能帮助到和我有同问题的人以及自己做一个记录。
标签:
相关文章
-
无相关信息