首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 项目里使用 scss 文件的一些技巧分享

Angular 项目里使用 scss 文件的一些技巧分享

作者头像
Jerry Wang
发布2022-11-30 16:19:01
1.7K0
发布2022-11-30 16:19:01
举报

本文介绍笔者在实际的 Angular 项目过程中积累的关于 scss 使用的一些实战技巧。

使用 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;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Angular 项目中导入 node_modules 文件夹下文件的一些技巧
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档