Angular项目中使用scss文件的一些技巧小结

目录
  • 使用 Angular CLI 新建一个 Angular 项目：
  • Angular 项目中导入 node_modules 文件夹下文件的一些技巧
  • 附：angular5 配置使用sass
  • 总结

使用 Angular CLI 新建一个 Angular 项目：

ng new my-sassy-app --style=scss

创建如下的 scss 文件：

styles.scss 是我们使用的主要 scss 文件，里面导入了以下划线开头的 _variables.scss 和 _mixins.scss:

// src/sass/styles.scss

@import './variables';
@import './mixins';

最后在 angular.json 里指定这个 styles.scss 文件即可：

"styles": [
  "sass/styles.scss"
],

现在我们有了新的 _variables.scss 和 _mixins.scss 文件，我们希望在我们其他的 Angular Component 中使用它们。在其他项目中，您可能习惯于在任意位置访问这些 scss 文件里定义的 Sass 变量。

在 Angular CLI 中，所有组件都是自包含的，它们的 Sass 文件也是如此。 为了在组件的 Sass 文件中使用 _variables.scss 中定义的变量，您需要导入 _variables.scss 文件。

一种方法是使用组件的相对路径 @import，比如 ../../ 这种写法。如果您有许多嵌套文件夹或最终需要移动这些 scss 文件，这或许不是一个好办法——可读性差，并且容易出错。

一个好办法是使用 alias 别名语法，用特殊符号波浪号代表：~. 在英语里 ～ 的单词是 tilde.

// src/app/app.component.scss
@import '~sass/variables';
// now we can use those variables!

波浪号 (~) 将告诉 Sass 查看 src/ 文件夹，它是导入 Sass 文件的快捷方式(short cut).

Angular 项目中导入 node_modules 文件夹下文件的一些技巧

我们通过一个实际的例子来讲解。假设我们引入了一个依赖 `bootstrap-sass：

npm install bootstrap-sass --save

这个 npm 包具有一些 scss 文件：

我们可以更新 angular.json, 引入 node_modules 文件夹：

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  ".",
			  "./stylings",
			  "../node_modules/bootstrap-sass/assets/stylesheets"
			]
		}

	}]
}

然后，在 Component 的 style 文件里，就可以使用相对路径，来导入这些 node_modules 文件夹下的 scss 文件：

// hello.component.scss
@import "variables";
@import "stylings2/variables";
@impoer "bootstrap/variables";

h1 {
	color: $brand-color;
	font-size: $font-size-large;
	font-family: $font-family-serif;
}

附：angular5 配置使用sass

1、利用npm工具安装sass依赖和loader

  cnpm/npm install node-sass --save-dev
  cnpm/npm install sass-loader --save-dev

2、修改.angular-cli.json文件

"styles": [
    "styles.scss"
],
"defaults":{
    "styleExt": "scss",
    "component": {}
}

3、将项目中的styel.css改成 style.scss

4、新建的component项目会直接生成.scss文件

总结

到此这篇关于Angular项目中使用scss文件的一些技巧的文章就介绍到这了,更多相关Angular使用scss文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Angular中支持SCSS的方法

    scss介绍 SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法. 由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作.也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展

  • Angular CLI在Angular项目中如何使用scss详解

    前言 SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法. 由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作.也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何

  • Angular项目中使用scss文件的一些技巧小结

    Angular项目中使用scss文件的一些技巧小结

    目录 使用 Angular CLI 新建一个 Angular 项目: Angular 项目中导入 node_modules 文件夹下文件的一些技巧 附:angular5 配置使用sass 总结 使用 Angular CLI 新建一个 Angular 项目: ng new my-sassy-app --style=scss 创建如下的 scss 文件: styles.scss 是我们使用的主要 scss 文件,里面导入了以下划线开头的 _variables.scss 和 _mixins.scss:

  • 详解在 Angular 项目中添加 clean-blog 模板

    详解在 Angular 项目中添加 clean-blog 模板

    在 Angular 项目中添加 clean-blog 模板 clean-blog 博客模板下载 clean-blog 或者在下面链接下载 startbootstrap-clean-blog-4-dev.zip 解压并拷贝 解压下载的文件,将所有文件拷贝到 assets/clean-blog 目录下 拷贝代码 将 clean-blog 的 index.html 内容拷贝到 app.component.html <!--The whole content below can be removed w

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • 详解Angular项目中共享模块的实现

    目录 一.共享CommonModule 二.共享MaterialModule 三.共享ConfirmDialog 一.共享CommonModule 创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 暂时只有CommonModule,以后会有一些需要共享的组件. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'

  • 如何在vite初始化项目中安装scss以及scss的使用

    目录 1.scss安装 2.scss的简单使用 (1)变量的定义 (2)简单使用 3.基本语法 (1)!default的使用 (2)变量的取值也可以是变量 (3)@mixin可以定义一段代码作为模板样式 (4)&的使用 (5)@extend的使用 (6)%变量名的使用 总结 1.scss安装 (1)打开终端输入, npm install sass -d (2)在src/assets文件夹下新建  style文件夹(文件名可以自定义),在文件夹下新建main.scss文件 (3)在vite.con

  • 如何在Django项目中引入静态文件

    今天继续学习Django,今天主要掌握两个小点 一.如果为Django项目中引入静态文件 1.先要在project目录下创建static的目录,然后将jquery文件拷贝这个目录下就可以了 2.在project的settings文件中静态文件的路径,注意,这里的逗号千万不可省略,不然Django会报错的 3.在html文件就可以引入这个jquery文件了 二.下面我们学习下如何前台提交数据到后台 1.先在html文件中写一个form表单,用来提交数据,我们就提交db这个url中,用post的方式

  • 详解eclipse项目中的.classpath文件原理

    详解eclipse项目中的.classpath文件原理

    目录 1 前言 2 作用 3 .classpath内容 3.1 kind="src" 3.2 kind="output" 3.3 kind="con" 3.3.1 JRE配置 3.3.2 Server Runtime配置 3.3.3 Web App Libraries配置 3.3.4 User Library配置 3.4 kind="lib" 3.5 顺序 1 前言 在使用eclipse或者myeclipse进行java项目开

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

  • 如何在React项目中引入字体文件并使用详解

    如何在React项目中引入字体文件并使用详解

    目录 前言 下面讲下如何引入字体文件并使用 一.下载字体包 二.将字体文件放到项目里 三.使用新字体 总结 前言 在做React项目的时候,发现UI设计给出的设计稿里,某些文字所用的字体,系统默认不支持.比如设计需要的这个字体:EmerlandRegular,即使在css里将文字字体设置为他们,实际效果也显示不出来. <Typography style={{ fontSize:'22px', fontFamily:'EmerlandRegular', textAlign:'center', co

  • vue项目中less的一些使用小技巧

    目录 前言 一.样式穿透 1.  什么是样式穿透? 2.  如何使用? 二.混入 1.  什么是混入? 2.  如何使用? 三. less自动化导入 1. 自动化导入好处 2.  如何实现? 总结 前言 我们所能看到的美观的网页都是经过UI精心设计后,由前端攻城狮搭建的.网页想要有炫酷的样式,就需要用到css来处理,其中不乏会出现大量重复.冗余的代码,这时,像less.sass.scss等样式预处理器就出现了,极大地精简了css代码,提高了开发效率.今天跟着本文一起看看在vue项目中使用less

随机推荐