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.scssinto 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.scssfile.

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 .scssfiles.

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的更多相关文章

  1. 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 ...

  2. Angular环境准备和Angular cli

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  3. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  4. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  5. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  6. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  7. Angular4---起步----环境配置安装@angular/cli

    学习angular,首先要搭建起angular的手脚架@angular/cli.首先需要NodeJS环境. 1.安装NodeJS 首先检查电脑是否安装了NodeJS环境,打开cmd命令行,运行node ...

  8. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  9. 使用Angular CLI从蓝本生成代码

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 这篇文章主要是讲生 ...

随机推荐

  1. Oracle WorkFlow(工作流)(一)

    转载自:http://hi.baidu.com/quce227/item/3dee702c66466a0343634a58 1概述 1.1工作流的概念 Workflow是EBS的基础架构技术之一,系统 ...

  2. EBS DBA指南笔记(三)

    第五章 patching   patch的作用:解决应用代码的问题:安装新的特征:更新technology stack组件.打patch不是一个简单的过程,但我们也没必要深究里面每个细节. EBS的p ...

  3. c# 单元测试工程如何取得当前项目路径

    前言: C#工程项目中有些配置文件,数据文件等不是C#工程文件,但是程序中需要访问,如果写成绝对路径不利于程序的迁移,所以必须写成相对路径.取得相对路径的方法很多,网上的例子也很多,基本上是七种吧,这 ...

  4. Mybatis接口编程原理分析(一)

    Mybatis接口编程示例 (1)首先定义接口编程需要的接口及其方法 public interface IUserMapper { public User getById(int id);//接口方法 ...

  5. Java 8新特性探究(一) JEP126特性lambda表达式和默认方法

    Lambda语法 函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口.比如Java标准库中的java.la ...

  6. 安卓手机与ROS通信遥控Gazebo中仿真机器人小车运动(ROS_indigo)

    首先,先列出需要用到的一些文件: Gazebo中机器人模型及说明: http://wiki.ros.org/grizzly_simulator https://github.com/g/grizzly ...

  7. iOS中 SDWebImage手动清除缓存的方法 技术分享

    1.找到SDImageCache类 2.添加如下方法: - (float)checkTmpSize { float totalSize = 0; NSDirectoryEnumerator *file ...

  8. 总账:日记账导入流程(文档 ID 1591640.1)

    文档内容   概要   历史记录   详细信息   GL_INTERFACE_CONTROL   GL_INTERFACE_HISTORY   GL_IMPORT_REFERENCES   摘要   ...

  9. tomcat集群实现源码级别剖析

    随着互联网快速发展,各种各样供外部访问的系统越来越多且访问量越来越大,以前Web容器可以包揽接收-逻辑处理-响应整个请求生命周期的工作,现在为了构建让更多用户访问更强大的系统,人们通过不断地业务解耦. ...

  10. 《java入门》第一季之类(String类字符串一旦被赋值就没法改变)

    毫无疑问,String类是java里面最重要的类之一.因此它有很多方法需要了解和掌握. 字符串一旦被赋值,值就不能发生改变: package cn.itcast_02; /* * 字符串的特点:一旦被 ...