使用 Angular Shortcut 导入 style 文件

举报
汪子熙 发表于 2023/05/16 10:03:22 2023/05/16
【摘要】 假设我们的 Angular 项目具有下列这个文件结构:在一个典型的 Angular 项目中,通常会有很多组件。每个组件都有自己的样式表(CSS、SCSS、LESS 等)。Angular 开发人员可能经常需要在组件中包含全局样式文件(特别是变量文件),比如上图的 _variables.scss.在 hello.component.scss 里需要导入全局 scss 样式,需要向下面这样反复使用...

假设我们的 Angular 项目具有下列这个文件结构:

在一个典型的 Angular 项目中,通常会有很多组件。每个组件都有自己的样式表(CSS、SCSS、LESS 等)。Angular 开发人员可能经常需要在组件中包含全局样式文件(特别是变量文件),比如上图的 _variables.scss.

hello.component.scss 里需要导入全局 scss 样式,需要向下面这样反复使用 .. 这种相对路径语法来向上回溯:

// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!

h1 {
    color: $brand-color;
}

这种相对路径语法非常容易出错。

如果你的项目是使用 Angular CLI 生成的,你可以在 .angular.cli.json 文件中添加一个 stylePreprocessorOptions > includePaths 的配置。这个配置允许你添加额外的基础路径,用于检查导入。它告诉 Angular CLI 在处理每个组件样式文件之前,在这些路径中查找样式文件。

例如,在我们的情况下,让我们将 ./stylings 添加到路径中。由于该配置接受一个数组,你可以添加多个路径。

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  "./stylings"
			]
		}
		
	}]
}

现在我们可以对 component 的 scss 文件进行重构:

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h1 {
    color: $brand-color;
}

在 Angular 项目中,angular.json 文件是一个重要的配置文件,它包含了项目的各种元数据和配置信息。其中,stylePreprocessorOptions 字段用于配置样式处理器选项。

stylePreprocessorOptions 字段允许你设置 Sass/Less 等 CSS 预处理器的选项。这些选项可以包括全局变量、混合(mixins)等。通过在 angular.json 文件中配置 stylePreprocessorOptions 字段,你可以将这些选项应用到整个项目中,而不需要在每个组件中都单独设置。

一个常见的用例是通过 stylePreprocessorOptions > includePaths 配置选项,将全局的样式文件路径添加到 Angular CLI 的编译上下文中。这样,在编译组件时,就可以直接引用全局样式文件中定义的变量和混合。这种用法称之为 shortcut

总之,stylePreprocessorOptions 字段的作用是允许你在 Angular 项目中使用预处理器,并提供了一些选项来配置预处理器的行为。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。