Angular 5中为特定模块配置专属全局样式文件的可行性咨询

当然可以实现啦！在Angular 5里，你完全可以给特定模块创建专属的「局部全局样式」，只作用于该模块内的所有组件，不会影响其他模块。具体操作步骤如下：

1. 创建模块专属样式文件 #

在你的目标模块（比如mymodule）的目录下，新建一个样式文件，比如命名为style-mymodule.scss。

2. 在模块配置中引入该样式 #

打开模块的.module.ts文件（比如my.module.ts），在@NgModule装饰器的styleUrls数组中添加这个样式文件的路径。这样该样式就会被限定在当前模块的所有组件中生效。

示例代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 导入模块内的组件
import { MyComponent } from './my.component';
import { MyOtherComponent } from './my-other.component';

@NgModule({
  declarations: [
    MyComponent,
    MyOtherComponent
  ],
  imports: [
    CommonModule
  ],
  // 引入模块专属样式文件
  styleUrls: ['./style-mymodule.scss']
})
export class MyModule { }

3. 关键注意事项 #

• 不要全局注册样式：千万别把style-mymodule.scss加到angular.json（或Angular 5常用的.angular-cli.json）的styles数组里，否则它会变成全局样式，影响整个应用。
• 样式封装机制：Angular默认开启了ViewEncapsulation.Emulated，会自动给模块内组件的DOM元素添加专属属性，确保模块样式不会泄露到外部。除非你手动关闭了组件的样式封装，否则不用担心样式污染。
• 复用全局变量：如果你的模块样式需要用到全局的样式变量（比如主题色、字体大小），可以在style-mymodule.scss里导入全局变量文件，比如：

// 导入全局变量文件
@import '../../styles/variables.scss';

// 模块专属样式规则
.my-module-card {
  background-color: $primary-theme-color;
  font-size: $base-font-size;
}

这样配置后，style-mymodule.scss里的样式就只会作用于MyModule内声明的所有组件，完美实现你想要的模块级"全局"样式效果。

内容的提问来源于stack exchange，提问作者Ben