因此，您可以创建一个主层，其中包含所有变量覆盖，然后您可以导入作用域CSS，您需要使用import语句在其上应用颜色！

@import "yourfile";

字符串
scss代码：

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block

  @import './test.scss';
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}

型
stackblitz
请在下面找到一个注解解释，除非它们是全局的，否则CSS变量只存在于定义的块中，因为变量（$someColor）不是全局定义，所以你会得到这个错误。
使用前：

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}

@layer main {
  // $someColor: orange;

  h1 {
    color: $someColor; // $someColor does not exists inside here since its isolated to the other @layer main block!
  }
}

型
之后：

body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

@layer main, overrides;

@layer main {
  $someColor: orange; // <- scope exists only inside this block

  h1 {
    color: $someColor;
  }
}
// $someColor does not exists outside here
@layer overrides {
  $someColor: red;
}

型