Question

我需要从.scss文件中按类选择器提取规则，以在Angular应用程序ui上显示，但是到目前为止，找不到适用于.scss的好的解析器，我只能将其用于按名称获取类规则。

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

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

是否有可以使用的scss类型？还是可以在我可以提供文件路径和必须从scss文件读取规则内容的类名称的地方使用的任何npm软件包？列出类选择器（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); }

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

1 个答案: