Using Sass with the Angular CLI
https://www.tuicool.com/articles/mauiMzY
One of the first things you'll usually do in a project is to bring in Sass to make working with CSS easier.
When working with theAngular CLI, the default stylesheets have the .css
extension. Let's explore how we can easily bring in Sass to our Angular CLI projects.
If you want a quick intro into the Angular CLI, check out the official docs and our Use the Angular CLI For Faster Angular v2+ Projects .
Starting an Angular CLI Project with Sass
Normally, when we run ng new my-app
, our app will have .css
files. To get the CLI to generate .scss
files (or .sass
/ .less
) is an easy matter.
Create a new project with Sass with the following:
ng new my-sassy-app --style=scss
You can also set the --style
flag with the following:
--style=scss
--style=sass
--style=less
Converting a Current App to Sass
If you've already created your Angular CLI app with the default .css
files, it will take a bit more work to convert it over. You can tell Angular to start processing Sass files with the following command:
ng set defaults.styleExt scss
This will go ahead and tell the Angular CLI to start processing .scss
files. If you want to peek under the hood at what this command did, check out the Angular CLI config file: .angular-cli.json
.
You'll find the new config line at the bottom of the file:
"defaults": {
"styleExt": "scss",
"component": {
}
}
Changing the CSS Files to Sass
The Angular CLI will start processing Sass files now. However, it doesn't go through the process of converting your already existing .css
files to .scss
files. You'll have to make the conversion manually .
Using Sass Imports
I personally like creating Sass files for project variables and for project mixins. This way, we can bring in any variables/mixins we'll need quickly and easily.
For instance, let's create a brand new CLI app:
ng new my-sassy-app --style=scss
Next, we'll create the following files:
|- src/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss
To start using these new Sass files, we'll import the _variables.scss
and _mixins.scss
into the main styles.scss
.
// src/sass/styles.scss @import './variables';
@import './mixins';
The last step is to update our .angular-cli.json
config to use this new src/sass/styles.scss
instead of the src/styles.scss
. In our .angular-cli.json
file, just change the following line to point to the right styles.scss
.
I like separating out our Sass into its own folder because it allows us to create a more robust Sass foundation. I personally lean towards the Sass 7-1 Pattern .
Now when we start up our app, these new Sass files will be used!
Importing Sass Files Into Angular Components
We have new _variables.scss
and _mixins.scss
files that we will probably want to use in our components. In other projects, you may be used to having access to your Sass variables in all locations since your Sass is compiled by a task runner.
In the Angular CLI, all components are self-contained and so are their Sass files. In order to use a variable from within a component's Sass file, you'll need to import the _variables.scss
file.
One way to do this is to @import
with a relative path from the component. This may not scale if you have many nested folders or eventually move files around.
The CLI provides an easy way to import Sass files using the ~
.
No matter what component Sass file we're in, we can do an import like so:
// src/app/app.component.scss @import '~sass/variables'; // now we can use those variables!
The tilde ( ~
) will tell Sass to look in the src/
folder and is a quick shortcut to importing Sass files.
Using Bootstrap Sass Files
Another scenario we'll need to do often is to import third party libraries and their Sass files.
We'll bring in Bootstrap and see how we can import the Sass files into our project. This is good since we can pick and choose what parts of Bootstrap we want to use. We can also import the Bootstrap mixins and use them in our own projects.
To get us started, install bootstrap:
npm install --save bootstrap@4.0.0-beta
Note: We're using the 4.0 beta because 4.0 is built with Sass and gives the proper .scss
files.
Adding Bootstrap CSS File
Now that we have Bootstrap, let's look at how we can include the basic CSS file. This is an easy process by adding the bootstrap.css
file to our .angular-cli.json
config:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"sass/styles.scss"
],
Note: We're using the ..
because the CLI starts looking from within the src/
folder. We had to go up one folder to get to the node_modules
folder.
While we can import the Bootstrap CSS this way, this doesn't let us import just sections of Bootstrap or use the Sass variables/mixins that Bootstrap provides.
Let's look at how we can use the Bootstrap Sass files instead of the CSS file.
Adding Bootstrap Sass Files
Let's cut down the number of CSS rules that we use in our app. Let's look at all the Sass files that Bootstrap uses :
/*!
* Bootstrap v4.0.0-beta (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/ @import "functions";
@import "variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";
That's a lot of tools that you may not use in your own project.
Inside our src/sass/styles.scss
file, let's import only the Bootstrap files we'll need. Just like we imported Sass files from the src
folder using the tilde ( ~
), the tilde will also look into the node_modules
folder.
We can do the following to only get the Bootstrap base tools:
// src/sass/styles.scss @import
'~bootstrap/scss/functions',
'~bootstrap/scss/variables',
'~bootstrap/scss/mixins',
'~bootstrap/scss/print',
'~bootstrap/scss/reboot',
'~bootstrap/scss/type';
Conclusion
The tilde ( ~
) makes importing Sass files in the Angular CLI super easy! Hope this quick tip was helpful in your Angular journey. Thanks for reading.
While it is a bit more work to have to import files into every component that you'll want to use them in, it's not too bad of a workaround to use the ~
.
Using Sass with the Angular CLI的更多相关文章
- Configure a proxy for your API calls with Angular CLI
Table of contents Local development setup with Angular Issue: Dev server plus backend API Configurin ...
- Angular环境准备和Angular cli
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题
前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...
- angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法
在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular4---起步----环境配置安装@angular/cli
学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...
- 使用Angular CLI进行单元测试和E2E测试
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
- 使用Angular CLI从蓝本生成代码
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 这篇文章主要是讲生 ...
随机推荐
- Oracle WorkFlow(工作流)(一)
转载自:http://hi.baidu.com/quce227/item/3dee702c66466a0343634a58 1概述 1.1工作流的概念 Workflow是EBS的基础架构技术之一,系统 ...
- EBS DBA指南笔记(三)
第五章 patching patch的作用:解决应用代码的问题:安装新的特征:更新technology stack组件.打patch不是一个简单的过程,但我们也没必要深究里面每个细节. EBS的p ...
- c# 单元测试工程如何取得当前项目路径
前言: C#工程项目中有些配置文件,数据文件等不是C#工程文件,但是程序中需要访问,如果写成绝对路径不利于程序的迁移,所以必须写成相对路径.取得相对路径的方法很多,网上的例子也很多,基本上是七种吧,这 ...
- Mybatis接口编程原理分析(一)
Mybatis接口编程示例 (1)首先定义接口编程需要的接口及其方法 public interface IUserMapper { public User getById(int id);//接口方法 ...
- Java 8新特性探究(一) JEP126特性lambda表达式和默认方法
Lambda语法 函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口.比如Java标准库中的java.la ...
- 安卓手机与ROS通信遥控Gazebo中仿真机器人小车运动(ROS_indigo)
首先,先列出需要用到的一些文件: Gazebo中机器人模型及说明: http://wiki.ros.org/grizzly_simulator https://github.com/g/grizzly ...
- iOS中 SDWebImage手动清除缓存的方法 技术分享
1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize { float totalSize = 0; NSDirectoryEnumerator *file ...
- 总账:日记账导入流程(文档 ID 1591640.1)
文档内容 概要 历史记录 详细信息 GL_INTERFACE_CONTROL GL_INTERFACE_HISTORY GL_IMPORT_REFERENCES 摘要 ...
- tomcat集群实现源码级别剖析
随着互联网快速发展,各种各样供外部访问的系统越来越多且访问量越来越大,以前Web容器可以包揽接收-逻辑处理-响应整个请求生命周期的工作,现在为了构建让更多用户访问更强大的系统,人们通过不断地业务解耦. ...
- 《java入门》第一季之类(String类字符串一旦被赋值就没法改变)
毫无疑问,String类是java里面最重要的类之一.因此它有很多方法需要了解和掌握. 字符串一旦被赋值,值就不能发生改变: package cn.itcast_02; /* * 字符串的特点:一旦被 ...