如何避免Carbon Svelte组件样式全局生效及使用单个组件SCSS？

1. 如何在Carbon Svelte组件中使用单个组件的SCSS样式表？ #

首先，你需要安装carbon-components（carbon-components-svelte依赖它的样式资源）和Sass预处理器，执行以下命令：

npm install carbon-components sass --save-dev

接着配置Svelte项目的Sass预处理器（以svelte.config.js为例）：

import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    scss: {
      includePaths: ['node_modules']
    }
  })
};

之后就能导入单个组件的SCSS样式了。注意组件样式依赖Carbon的基础变量和工具类，需先导入必要的全局基础资源，再导入组件专属样式：

<style lang="scss">
  // 导入Carbon基础变量与工具类
  @import '@carbon/components/scss/globals/scss/vars';
  @import '@carbon/components/scss/globals/scss/mixins';
  
  // 导入DatePicker专属样式
  @import '@carbon/components/scss/components/date-picker/date-picker';
</style>

如果仍找不到SCSS文件，检查node_modules/carbon-components目录是否存在，若不存在重新安装该依赖即可。

2. 其他防止样式全局生效的方法 #

方法一：用Shadow DOM隔离样式 #

Svelte支持开启Shadow DOM，将组件样式完全隔离在独立DOM树中，不会污染全局。在封装DatePicker的组件中添加：

<svelte:options shadow={true} />

<script>
  import { DatePicker } from 'carbon-components-svelte';
</script>

<DatePicker />

<style lang="scss">
  // 导入的DatePicker样式仅作用于Shadow DOM内部
  @import '@carbon/components/scss/components/date-picker/date-picker';
</style>

方法二：用容器限定样式作用范围 #

把DatePicker放在专属容器内，通过:global()伪类将Carbon样式限定在容器内部：

<script>
  import { DatePicker } from 'carbon-components-svelte';
</script>

<div class="date-picker-wrapper">
  <DatePicker />
</div>

<style lang="scss">
  .date-picker-wrapper {
    @import '@carbon/components/scss/globals/scss/vars';
    // 限定样式仅作用于当前容器内的DatePicker
    :global(.bx--date-picker) {
      @import '@carbon/components/scss/components/date-picker/date-picker';
    }
  }
</style>

方法三：自定义CSS变量覆盖冲突样式 #

若只是局部样式冲突，可通过Carbon提供的CSS变量在全局或局部覆盖属性：

/* 在你的全局样式或组件样式中 */
:root {
  --bx--text-color-primary: #333; /* 覆盖Carbon默认文本颜色 */
}

内容的提问来源于stack exchange，提问作者A.G