angular2-cli 配置pug,scss,bootstrap

首先确保你没有下载过angular-cli,如果下载了请确保是稳定版的,不然就清除

 npm uninstall @angular-cli -g 

npm cache clean

接下来安装angular-cli

cnpm i @angular/cli@latest -g

接下来使用

 ng --version

如果是1.0.0 说明安装成功,如果有beta,不合适当前文档

新建项目

配置scss

ng new projectName --style=scss

添加pug

1,在node_modules文件下查找  @angular/cli/models/webpack-configs/common.js

2,然后修改common.js

3,添加pug的配置

4在rules添加

> { test: /\.pug$/, loader: 'apply-loader!pug-loader?self'}

安装bootstrap

npm i bootstrap --save-dev

在.angular-cli.json文件中修改app属性

"styles": [

"../node_modules/bootstrap/dist/css/bootstrap.css"

],

"scripts": [

"../node_modules/bootstrap/dist/css/bootstrap.css"

]

添加完成之后就可以重启启动项目了

 ng server

在本地打开 localhost:4200就可以了,剩下就是快乐的敲angular2代码就好

个人实践可以运行,有问题评论就好,会定期查看

借鉴 http://www.jianshu.com/p/f8d1742b49c1

推荐大漠老师的博客: https://my.oschina.net/mumu/blog

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,246评论 7 35
  • Angular CLI 是什么? Angular CLI 是一个命令行接口(Command Line Interf...
    semlinker阅读 4,235评论 0 39
  • 一、 背景介绍: 两个概念: 关于Angular版本,Angular官方已经统一命名Angular 1.x统称为A...
    Keriy阅读 74,025评论 9 33
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 1,009评论 0 0
  • 2016年1月5日,一场从上午便开始,持续了近四个小时的围棋对弈以年仅19岁小将柯洁九段的半目之胜落下帷幕。手握1...
    豆豆是个小团子阅读 1,406评论 7 9