Angular中如何从SCSS文件仅导入单个或部分变量？

最佳解决方案是把全局变量单独抽离成一个独立的SCSS部分文件，这样既能在全局styles.scss中使用，也能在组件SCSS中仅导入变量部分，完全避免引入整个庞大的styles.scss文件。具体操作步骤如下：

• 第一步：抽离变量到独立文件
  在项目的src/styles/目录下创建一个名为_variables.scss的文件（文件名前加下划线是SCSS的约定，表示这是一个"部分文件"，不会被单独编译成CSS），然后把styles.scss中需要复用的变量移到这个文件里，示例代码：

  // src/styles/_variables.scss
  $primary-color: #1976d2;
  $font-size-large: 1.2rem;
  $border-radius: 4px;
  // 其他需要跨组件复用的变量
  

  之后在全局styles.scss中导入这个变量文件，确保全局样式能正常使用这些变量：

  // src/styles/styles.scss
  @import './variables';
  // 原来styles.scss中的其他全局样式代码
  

• 第二步：在组件SCSS中导入变量文件
  在需要使用变量的组件SCSS文件中，直接导入刚才的_variables.scss文件（注意根据组件文件的路径调整导入路径），然后就能在::ng-deep规则里使用变量了，示例：

  // src/app/your-component/your-component.component.scss
  @import '../../styles/variables'; // 路径根据实际项目结构调整
  
  ::ng-deep .dynamic-generated-element {
    color: $primary-color;
    font-size: $font-size-large;
    border-radius: $border-radius;
  }
  

补充说明 #

SCSS本身没有提供直接从一个文件中导入"单个/部分变量"的语法，所以抽离变量到独立文件是社区通用的最佳实践——既保证了变量的统一管理，又能最小化导入的代码量，完全符合你的需求。

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