详解Angular-cli生成组件修改css成less或sass的实例

详解Angular-cli生成组件修改css成less或sass的实例

使用cli命令生成组件:

ng generate component 组件名

生成出来的组件文件有：html / ts / css / spec.ts

问题我是一个less重度患者怎么可能再去写css呢。

于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件；

修改angular-cli.json文件：

apps
  "styles": [
    "styles.less"
  ]
"defaults":
  "styleExt": "less",

这样就能用组件命令生成的时候替换css文件成less文件

但是angular代码会报错，需要去修改所有的.css文件成.less文件。

ts文件内引用的styleUrls里面的css修改成less

cli编辑不报错了

less编译问题：

less less-loader

sass文件的操作如上一样

以上就是对Angular-cli生成组件修改css成less或sass的实例详解，如有疑问请留言或者到本站社区交流讨论，本站关于AngularJS 的文章还有很多，欢迎大家搜索查阅，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • angular动态删除ng-repaeat添加的dom节点的方法

    angular动态删除ng-repaeat添加的dom节点的方法

    本文介绍了angular动态删除ng-repaeat添加的dom节点的方法,分享给大家供大家参考,具体如下: 通过点击删除按钮删除数据库信息以及当前行 html代码如下: <div class="row"> <div class="col-xs-12"> <!-- PAGE CONTENT BEGINS --> <div class="row"> <div class="col-xs

  • Angular 1.x个人使用的经验小结

    前言 angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架,之前工作以Angular1.x为主,主要做业务系统,以后工作中技术栈可能以vue为主,在此对Angular1.x的使用做一个简单总结,这里使用1.5+版本.下面话不多说,来一起看看详细的介绍: 基本概念  1.依赖注入 依赖注入,在angular中到处可见,这里不会照本宣科,只以很直白的方式的简单描述基本使用方式,以$scope注入为例. 创建一

  • Angular中ng-repeat与ul li的多层嵌套重复问题

    学习ng-repeat的过程中常常使用到ng-repeat="item in array"来循环输出所需要的元素,但是当我们需要使用ng-repeat进行多层嵌套时则容易出现数据重复的问题. 如在加载与点击事件于js中进行两次http请求获取data分别为list01[]数组和list02[]赋值再如下显示则会导致it1下每个ul都会重复输出list02[]数组中的内容 <ul ng-repeat="it1 in list01"> <li ng-c

  • Angular中自定义Debounce Click指令防止重复点击

    在这篇文章中,我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令.该指令将处理在指定时间内多次点击事件,这有助于防止重复的操作. 对于我们的示例,我们希望在产生点击事件时,实现去抖动处理.接下来我们将介绍 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相关知识.首先,我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.

  • 详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例 使用cli命令生成组件: ng generate component 组件名 生成出来的组件文件有:html / ts / css / spec.ts 问题我是一个less重度患者怎么可能再去写css呢. 于是我就在想使用cli生成组件的时候能直接生成出来的是less文件而不是css文件: 修改angular-cli.json文件: apps "styles": [ "styles.less"

  • 详解@angular/cli 改变默认启动端口两种方式

    因为本地希望开启两个项目,由于@angular/cli 生成项目默认是: 4200; 那么肯定会有端口冲突问题; 修改端口的两种方式: 1 修改 schema.json node_modules\@angular-devkit\build-angular\src\dev-server\schema.json { "title": "Dev Server Target", "description": "Dev Server target

  • 详解Angular cli配置过程记录

    详解Angular cli配置过程记录

    1.首先调出命令行工具,运行命令全局安装Angular -cli npm i -g @angular/cli 安装过程中我的命令行工具内出现了警告和报错信息,我没有管它,因为我在后续使用中并没有遇到什么麻烦. 安装完成后可通过命令行ng v查看安装的版本信息,我的是这样的 _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | /

  • 使用Angular CLI生成 Angular 5项目教程详解

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网:https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命

  • 详解Angular组件生命周期(一)

    详解Angular组件生命周期(一)

    概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life

  • 详解Angular父子组件通讯

    详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来

  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看

  • 详解Angular组件之生命周期(二)

    详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • 详解Angular组件之投影

    详解Angular组件之投影

    概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>

随机推荐