Angular 4 - 从 scss 文件中按名称读取规则

Question

我需要通过类选择器从 .scss 文件中提取规则，以显示在 Angular 应用程序 ui 上，但到目前为止还没有找到一个好的 .scss 解析器，我可以使用它来按名称获取类规则。

示例：如果我通过类选择器名称='custom-class'，我需要括号中的内容，很简单。

.custom-class {
   width: 334px;
   text-decoration: underline;
}

是否有可以使用的 scss 类型？或者任何可以使用的 npm 包，我可以提供文件路径和必须从 scss 文件中读取规则内容的类名？ 列出类选择器的示例（https://www.npmjs.com/package/list-css-selectors）有一个 npm 包（但适用于 css 文件），但找不到可以从 scss 文件中获取类内容的包。

Answer 1

您无法从应用程序运行时访问 .scss 文件，因为它们被处理为 css 文件。您可以尝试列出浏览器加载的所有样式表以找到所需的类。

for (let i = 0; i < document.styleSheets.length; i++) {
  const sheet = document.styleSheets[i];
  if (sheet['cssRules']) {
    for (const rule of sheet['cssRules']) {
      const cssText = rule['cssText'] as string;
      if (cssText.startsWith('.my-class')) {
        console.log(cssText);
      }
    }
  }
}
// Console output:
// .my-class { color: rgb(51, 51, 51); }