Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:

  • css
  • scss
  • less
  • sass
  • styl (stylus)

默认值为css。

Angular有两种方式指定css预处理。下面以scss为例:

新建项目指定css预处理

在新建angular项目是使用--style指定css预处理

ng new my-project --style=scss

已有项目指定css预处理

对于已有的项目,也是支持修改css预处理。

查看.angular-cli.json,在defaults配置项里有类似下面的声明:

"defaults": {
  "styleExt": "css",
  "component": {}
}

使用set指令修改styleExt

ng set defaults.styleExt scss

如果项目统一使用scss,建议把项目里的css文件改为scss,记得也要修改其他文件对css文件的引用。其中styles.css的引用在.angular-cli.json里。

参考:stories css processors

版权声明:著作权归作者所有。

相关推荐

使用stackblitz在线运行github上基于Angular CLI构建的项目

在Github上面有很多Angular的demo,示例等等,我们要运行Github里的示例,需要经过下载,初始化项目,然后才到运行项目,这中间会花去很多时间。有一个叫做StackBlitz的项目,它可以看作一个轻量级的在线的IDE,它允许我们在线运行基于Angular CLI构建的项目。更进一步,对于Github上的项目,我们只需要简单地在浏览器输入对应的url即可运行我们想要的项目。示

Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。安装在导入jQuery之前需要先安装:npm install jquery --save npm install @types/jquery --save 全局方式在.angular-cli.json的app.scripts引入jquery&quo

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --