Vue3 中使用 <style scoped> 外部引入样式文件

<template>
  <!-- 组件模板 -->
</template>
<script>
  // 组件逻辑
</script>
<style scoped src="./styles.css"></style>
<p>在 Vue3 中，使用外部引入的样式文件需要在组件中使用 <code>import</code> 语句，然后在 <code>style</code> 标签中使用 <code>src</code> 属性指定样式文件路径。</p>
<p>例如，有一个名为 <code>MyComponent.vue</code> 的组件，需要引入一个名为 <code>styles.css</code> 的样式文件。可以按照以下步骤操作：</p>
<ol>
<li>在 <code>MyComponent.vue</code> 中使用 <code>import</code> 引入样式文件：</li>
</ol>
<pre><code class="language-javascript">&lt;template&gt;
  &lt;!-- 组件模板 --&gt;
&lt;/template&gt;

&lt;script&gt;
  // 组件逻辑
&lt;/script&gt;

&lt;style scoped src=&quot;./styles.css&quot;&gt;&lt;/style&gt;
</code></pre>
<ol start="2">
<li>在 <code>style</code> 标签中使用 <code>src</code> 属性指定样式文件路径，注意要添加 <code>scoped</code> 属性以确保样式只作用于当前组件。</li>
</ol>
<p>这样就可以在 Vue3 中使用外部引入的样式文件了。</p>