docs: ✏️ 常见问题添加Vue 3.3+使用defineOptions设置styleIsolation规则的介绍

 Closes: #784
This commit is contained in:
不如摸鱼去 2024-12-15 22:55:11 +08:00
parent 1fd0a27788
commit f3bee13b46

View File

@ -58,7 +58,9 @@ pnpm add sass@1.78.0 -D
<wd-button type="primary">主要按钮</wd-button> <wd-button type="primary">主要按钮</wd-button>
``` ```
`Vue 3.2` 及以下版本可以使用如下配置开启`styleIsolation: 'shared'`选项:
```ts ```ts
// vue
<script lang="ts"> <script lang="ts">
export default { export default {
options: { options: {
@ -66,6 +68,8 @@ export default {
} }
} }
</script> </script>
<script lang="ts" setup>
</script>
``` ```
```scss ```scss
@ -74,21 +78,14 @@ export default {
color: red !important; color: red !important;
} }
``` ```
`Vue 3.3+` 可以通过`defineOptions`开启`styleIsolation: 'shared'`选项:
什么?还有人想问:这样写还我怎么使用`script setup`啊!
**_简单这样写两个就行了_**
```ts ```ts
<script lang="ts"> <script lang="ts" setup>
export default { defineOptions({
options: { options: {
styleIsolation: 'shared' styleIsolation: 'shared'
} }
} })
</script>
<script lang="ts" setup>
</script> </script>
``` ```