```json
{
"summary

我们无法直接使用SCSS的嵌套语法来完全替代Tailwind的类，因为Tailwind的设计是原子化的。但是，如果用户坚持要使用@apply来提取，我们可以尝试按组件层级进行嵌套。
注意：根据Tailwind最佳实践，过度使用@apply会导致CSS体积增大，失去原子化优势。但既然用户要求，我们按如下步骤：
1. 为每个菜单项创建一个基础类，比如`.menu-item`，然后根据状态（如active）创建变体。
2. 将每个菜单项内部的图标和文本也提取为子类。
3. 将原Tailwind类转换为@apply形式，并保持层级嵌套。

但是，请注意：原组件中使用了多个类，我们需要将它们合并到对应的类中。

另外，关于图片资源：原组件中没有使用图片，只有SVG图标。用户要求将图片资源链接修改为占位符，但这里没有图片，只有内联SVG。所以不需要改动。

然而，用户示例中要求将图片资源链接修改为https://placehold.co/宽x高，但我们的组件中没有图片，所以忽略。

我们将按照以下结构：
- 最外层容器：`.sidebar-menu`
- 每个菜单项：`.menu-item`，以及激活状态：`.menu-item.active`
- 菜单项内部：图标`.menu-icon`和文本`.menu-text`

调整后的代码：

注意：由于使用了@apply，我们需要在<style>中先引入Tailwind的基础样式，但用户可能已经全局引入，所以我们只写组件的样式。

但是，用户要求按层级嵌套，所以我们将这样写：

由于原组件中每个菜单项的结构相同，只是样式不同（激活和非激活），我们可以用一个基础类`.menu-item`，然后通过状态类来区分。

由于非激活项有边框，激活项没有边框，所以我们在基础类中不写边框，而在非激活项中写边框。

具体实现：

原HTML结构：
<div class="sidebar-menu">
<div class="menu-item active">...</div>
<div class="menu-item">...</div>
...
</div>

我们将为每个菜单项设置基础样式，然后为激活状态和默认状态设置不同的样式。

但是，由于用户要求将样式提取到<style>中，我们将原代码中的类用@apply提取到对应的类名中。

步骤：
1. 创建类名：`.sidebar-menu`，`.menu-item`，`.menu-icon`，`.menu-text`。
2. 将原div的类转移到对应的类中，并用@apply书写。
3. 注意：激活状态和默认状态的样式差异。

但是，原组件中非激活状态有边框和阴影，激活状态没有。而且激活状态背景色是蓝色，文字白色；非激活状态背景透明，文字蓝色，边框蓝色。

另外，用户要求取消圆角，所以去掉rounded类。

我们按照用户示例的结构，将样式写在<style>标签中，HTML部分使用类名。

注意：我们还需要保留交互状态（hover）的样式。

由于原组件中每个菜单项都有hover效果，所以我们也需要为hover状态写样式。

我们将为：
- 激活状态的hover：背景色变深
- 非激活状态的hover：背景变为蓝色50（浅蓝色）

具体代码结构如下：

<style lang="scss">
.sidebar-menu {
@apply flex flex-col gap-4 w-full;

.menu-item {
@apply flex items-center gap-3 px-4 py-3 cursor-pointer transition-colors duration-200;

.menu-icon {
@apply w-6 h-6;
}

.menu-text {
@apply text-base font-medium leading-normal;
}

&.active {
@apply bg-blue-700 text-white;

&:hover {
@apply bg-blue-800;
}
}

&:not(.active) {
@apply bg-transparent text-blue-700 border border-solid border-blue-700 shadow-sm;

&:hover {
@apply bg-blue-50;
}
}
}
}
</style>

然后，在HTML部分，我们使用这些类名。

但是，注意：原激活项没有边框，非激活项有边框。我们通过`:not(.active)`来设置非激活项的样式。

另外，原激活项的图标颜色是白色，非激活项是蓝色。我们在`.menu-item`中设置了图标的尺寸，但颜色需要根据父级状态变化。由于SVG的`fill`属性我们使用了`currentColor`，所以图标的颜色会继承父级的文字颜色。因此，我们只需要设置父级的文字颜色，图标颜色就会随之变化。

所以，在`.menu-item`中，我们不需要单独设置图标的颜色，因为图标使用了`fill="currentColor"`。

因此，我们可以在`.menu-item`中设置颜色，然后通过状态覆盖。

但是，在非激活状态下，我们设置了`text-blue-700`，所以图标也会是蓝色。在激活状态下，文字白色，图标白色。

这样，我们就不需要为图标单独设置颜色类。

调整后的HTML结构：

<div class="sidebar-menu">
<div class="menu-item active">
<svg class="menu-icon">...</svg>
<span class="menu-text">《全球每日要情》</span>
</div>
<div class="menu-item">
<svg class="menu-icon">...</svg>
<span class="menu-text">《全球主要国家改革动态与分析》</span>
</div>
...其他菜单项
</div>

注意：由于我们使用了嵌套的SCSS，我们需要确保项目支持SCSS，并且已经配置了Tailwind。

最后，按照用户要求，输出代码。

但是，用户要求输出JSON格式，其中html字段包含整个组件的HTML和<style>标签。

因此，我们将整个组件（包括<style>和HTML结构）放在html字段中。

另外，用户要求图片资源链接修改，但这里没有图片，所以忽略。

输出示例：

注意：由于JSON字符串中不能直接包含多行字符串，我们需要将整个HTML和CSS代码转成一行（用\n换行符是可以的，但实际在JSON字符串中，换行符需要转义，但根据之前的输出，我们使用\n表示换行，实际在JSON中会解析为换行）。

但是，在JSON字符串中，我们可以使用\n，它会被解析为换行符。而HTML代码中，我们使用双引号，所以需要转义，但我们这里使用单引号？或者将HTML中的双引号改为单引号？或者对双引号进行转义。

为了简单，我们使用单引号表示HTML属性，这样在JSON字符串中就不会冲突。

因此，我们将HTML中的双引号改为单引号。

例如：<div class='sidebar-menu'>...</div>

这样，整个字符串就可以用双引号包裹放在JSON中。

但是，原SVG中的属性是双引号，我们将其改为单引号。

具体步骤：将原代码中所有的双引号（属性值）改为单引号。

另外，我们还需要注意：SVG路径中的双引号不需要改，因为它们是内容，不是属性。但为了安全，我们只改标签属性。

然而，我们也可以不对属性使用单引号，而是对HTML字符串中的双引号进行转义（用\"），但这样可读性差。

我们选择：将最外层的HTML标签属性用单引号，内部SVG属性保持双引号（因为SVG是字符串内容，不会影响外层）。

例如：<svg class="menu-icon" viewBox="0 0 20 20"> 这里class属性用双引号，但整个SVG是字符串，在HTML中不会冲突。

但是，我们整个HTML字符串是放在JSON的字符串值中的，所以需要转义双引号。但为了简单，我们不对HTML字符串中的双引号进行转义，而是用单引号包裹外层HTML标签的属性。

修改：将外层HTML标签的属性用单引号，内部SVG标签的属性保持双引号（因为SVG是内嵌字符串，不需要转义，因为外层用单引号，内层双引号不会冲突）。

例如：<div class='sidebar-menu'>...<svg class="menu-icon">...</svg>...</div>

这样，在JSON字符串中，整个HTML字符串用双引号包裹，而里面的class属性用单引号，SVG标签属性用双引号，不会冲突。

但是，我们也可以全部用双引号，然后在JSON字符串中对双引号进行转义（即HTML中的双引号前加反斜杠）。但这样代码可读性差。

我们选择使用单引号表示外层标签的属性，内部SVG不变。

开始编写：

注意：由于SVG路径中有双引号，我们不需要改动，因为整个SVG字符串在HTML中是文本，不会解析为标签的边界。

因此，我们只需要将外层HTML标签（div、span等）的属性用单引号即可。

最后，我们将整个组件的代码（包括<style>和HTML）放入html字段。

但是，用户要求输出格式为：
"html": "<style>...</style>\n<div>...</div>"

因此，我们按此结构输出。

由于代码较长，我们按步骤编写。

注意：在SCSS中，我们使用了嵌套，需要确保编译环境支持。

另外，我们使用了Tailwind的@apply，所以需要确保Tailwind已配置。

现在，编写代码：

由于非激活项有边框，激活项没有，我们在SCSS中通过`:not(.active)`来设置非激活项的边框和背景等。

但是，注意：原激活项没有边框，所以我们不在激活项中设置边框。

我们按照上述思路编写。