为何Angular组件scss导入styles.scss会导致Bootstrap5.2栅格类失效？

在组件样式文件中直接导入全局styles.scss会导致Bootstrap栅格类失效，核心原因是：

• 全局styles.scss已通过angular.json加载并导入了Bootstrap，全局.row/.col样式正常生效；
• 组件内重复导入styles.scss，会将Bootstrap的SCSS代码重新编译一次，结合Angular默认的Emulated视图封装，新编译的Bootstrap样式会被加上组件专属的[_ngcontent-xxx]属性选择器，优先级高于全局样式。重复编译会破坏Bootstrap栅格的布局逻辑，最终导致栅格类失效。

方案1：抽离变量单独导入（推荐） #

不要直接导入整个全局样式文件，只抽离需要复用的变量单独导入：

1. 在src目录创建_variables.scss，存放自定义颜色变量：

// src/_variables.scss
$primary-color: #0d6efd;
$secondary-color: #6c757d;
// 其他自定义变量

2. 修改全局styles.scss，先导入变量再导入Bootstrap：

// src/styles.scss
@import "./variables";
@import "bootstrap/scss/bootstrap.scss";
// 其他全局样式

3. 在组件样式文件中仅导入变量文件：

// navigation-header.component.scss
@import "../../variables";

// 直接使用变量编写组件样式
.nav-container {
  background-color: $primary-color;
}

方案2：配置全局预处理器变量 #

通过Angular配置让所有组件自动识别变量，无需手动导入：

1. 确保_variables.scss文件存在（同方案1）；
2. 修改angular.json的build选项，添加预处理器配置：

// angular.json
"projects": {
  "你的项目名": {
    "architect": {
      "build": {
        "options": {
          // 其他配置...
          "stylePreprocessorOptions": {
            "includePaths": ["src"],
            "additionalData": "@import 'variables';"
          }
        }
      }
    }
  }
}

配置完成后，所有组件的SCSS文件可直接使用变量，无需手动导入任何文件。

方案3：使用ViewEncapsulation.None（不推荐） #

若必须在组件内导入全局样式文件，可关闭组件的视图封装，但此方式会让组件样式变为全局样式，极易引发样式冲突：

1. 修改组件的TS文件：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-navigation-header',
  templateUrl: './navigation-header.component.html',
  styleUrls: ['./navigation-header.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class NavigationHeaderComponent {
  // 组件逻辑
}

内容的提问来源于stack exchange，提问作者J.F.Dimdim