素材巴巴 > 程序开发 >

启动angular项目时,样式有问题

程序开发 2023-09-18 17:12:55

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文件夹只是真身的快捷方式。 

记录此问题,希望能帮助到和我有同问题的人以及自己做一个记录。

 

 

 


标签:

上一篇: vue3 父组件调用子组件中方法 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。