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 这篇文章主要是讲生 ...
随机推荐
- Android:ADB server didn't ACK或者adb server is out of date. killing解决办法
欢迎关注公众号,每天推送Android技术文章,二维码如下:(可扫描) 出现这个原因我个人感觉有两个.一.5037端口被别的程序或者进程占用:二.adb占用的不是5037端口.很多人仅仅知道第一种二忽 ...
- Android必知必会-Handler可能引起的内存泄露
在Android开发中,编写多线程通常会使用到Thread和Handler,细心的朋友会发现,很常见的写法会被编辑器提示有问题,new Handler(){} 内的代码背景颜色会变成黄色.Androi ...
- XML跨平台,你懂的
XML跨平台,你懂的 [引子] 90后小妹,问我,"都说XML跨平台,偶真的,不理解.XML语言的这大优势,倒是深深记在脑海里了." 当然,偶立马应声答到,& ...
- Linux多线程实践(4) --线程特定数据
线程特定数据 int pthread_key_create(pthread_key_t *key, void (*destr_function) (void *)); int pthread_key_ ...
- xml作用以及语法
2 XML作用 2.1 描述带关系的数据(软件的配置文件) web服务器(PC): 学生管理系统 -> 添加学生功能 -> 添加学生页面 -> name=eric&email ...
- 安卓TV开发(十) 智能电视开发之在线视频直播
转载注明出处:http://blog.csdn.net/sk719887916/article/details/46582987 从<安卓TV开发(八) 移动智能终端多媒体之在线加载网页视频源& ...
- Java之美[从菜鸟到高手演变]之设计模式四
在阅读过程中有任何问题,请及时联系:egg. 邮箱:xtfggef@gmail.com 微博:http://weibo.com/xtfggef 转载请说明出处:http://blog.csdn.net ...
- 【Android 应用开发】分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计
.主要是为了总结一下 对这些概念有个直观的认识; . 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/198 ...
- 【一天一道LeetCode】#16. 3Sum Closest
一天一道LeetCode系列 (一)题目: Given an array S of n integers, find three integers in S such that the sum is ...
- UIScrollView的无限左滑轮播一点也不难
UIScrollView的轮播在如今的app中用得十分广泛,最初实现的时候方式比较拙劣,滚动到最后一个视图时再返回到第一个看起来非常的不连贯. 今天查询UIScrollView轮播资料,总结两种比较喜 ...