如何在Stenciljs中为单个组件关联两个SCSS样式表

嘿，我完全懂你的困扰——想给单个组件同时用上自身专属样式和公共样式，但又不想让所有组件都被迫加载全局所有样式，对吧？之前你尝试用styleUrls: ['./my-component.scss', '../../index.scss']只生效第一个，大概率是路径问题或者项目结构的优化空间，给你几个实用的解决方法：

方法一：在组件样式中导入公共样式（最推荐） #

其实不用在styleUrls里写两个路径，直接在组件自己的SCSS文件里导入公共样式就好，这样Stencil会自动把这两部分样式打包在一起，而且只会作用于当前组件：

1. 先把index.scss里的公共通用样式抽出来单独放一个文件，比如src/styles/common.scss（别再在index里导入所有组件样式啦，这就是之前全局样式污染的根源）
2. 打开你的my-component.scss，在顶部加上：

   @import '../../styles/common.scss';
   

3. 然后组件里的styleUrls只需要保留自身样式路径就行：

   styleUrls: ['./my-component.scss']
   

这样一来，组件既会加载自己的专属样式，也会包含你需要的公共样式，而且不会影响其他组件。

方法二：修复styleUrls的路径问题 #

如果你坚持想用styleUrls数组的方式，先检查第二个路径是否正确：

• 比如你的组件在src/components/my-component/目录下，根目录的index.scss如果在src/里，那正确的相对路径应该是../index.scss而不是../../index.scss（多退了一级）
• 嫌相对路径麻烦的话，还可以在stencil.config.ts里配置绝对路径别名，这样写起来更清晰：

  import { Config } from '@stencil/core';
  import path from 'path';
  
  export const config: Config = {
    // 其他配置...
    resolveAlias: {
      '@': path.resolve(__dirname, 'src')
    }
  };
  

  之后styleUrls就可以写成：

  styleUrls: ['./my-component.scss', '@/index.scss']
  

记得要确保index.scss里没有导入其他组件的样式，不然还是会出现全局污染的问题哦。

避坑提醒 #

别再用全局导入所有组件样式的方式啦！每个组件应该只负责加载自己的样式+需要的公共样式，这样不仅能避免样式冲突，还能优化打包体积。

备注：内容来源于stack exchange，提问作者happy_story