innerHTML注入的SASS样式不起作用

是因为innerHTML属性只能将字符串作为HTML插入到元素中，而不会解析其中的样式。SASS是一种CSS预处理器，需要通过编译器将其转换为浏览器可识别的CSS样式。

解决这个问题的方法是使用其他方式将SASS样式应用到元素中，例如使用style标签或外部CSS文件。以下是一些解决方案：

1. 使用style标签：可以通过创建一个style标签，将SASS样式作为文本内容插入到其中，然后将该标签插入到目标元素中。示例代码如下：

var styleTag = document.createElement('style');
styleTag.innerHTML = '/* 这里插入SASS样式 */';
document.querySelector('.target-element').appendChild(styleTag);

1. 使用外部CSS文件：将SASS样式编译为CSS文件，并通过link标签将其引入到HTML文档中。示例代码如下：

<link rel="stylesheet" href="path/to/your/style.css">

1. 使用CSS-in-JS库：可以使用一些流行的CSS-in-JS库，如styled-components、Emotion等，将SASS样式直接应用到组件中。这些库会在运行时将SASS样式转换为浏览器可识别的CSS样式。示例代码如下：

import styled from 'styled-components';

const StyledElement = styled.div`
  /* 这里插入SASS样式 */
`;

// 在组件中使用
<StyledElement>...</StyledElement>

总结一下，innerHTML注入的SASS样式不起作用是因为innerHTML属性只能插入字符串作为HTML，无法解析其中的样式。解决方法包括使用style标签、外部CSS文件或CSS-in-JS库来应用SASS样式。