欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angular-cli styles 全局样式引用无效

程序员文章站 2022-07-14 09:26:33
...

开发环境

  1. webstorm
  2. node
  3. angular
  4. angular-cli
  5. npm(cnpm)

使用angular-cli 引入全局css样式:

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

发现页面没有加载任何bootstrap样式,但是npm start时没有报错,能正常启动。

原因

使用淘宝的npm镜像cnpm,使用cnpm install命令安装模块时,下载的带下划线,带@符号的才是文件的真身,bootstrap文件夹只是真身的快捷方式,如图:

angular-cli styles 全局样式引用无效

解决方法

在.angular-cli.json文件中,使用实际地址,而非快捷方式:

"styles": [
  "styles.css",
  "../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css",
  "../node_modules/_admin-lte@2.4.2@admin-lte/dist/css/AdminLTE.min.css",
  "../node_modules/_admin-lte@2.4.2@admin-lte/dist/css/skins/skin-blue.min.css"
],
相关标签: angular nodejs