将React组件移植到Stencil时，SCSS嵌套导入能否被正常处理？

Stencil完全支持SCSS的嵌套导入结构，你根本不需要手动把所有SCSS文件合并成一个，放心按照现有结构迁移就行。

为什么可以直接用？ #

Stencil内置了成熟的Sass预处理器，编译时会自动递归解析.scss文件中的@import语句——不管是你的组件样式导入A.scss，还是A.scss导入Bootstrap变量文件和B.scss，这种多层嵌套的导入关系都能被正确处理，最终会把所有依赖的样式合并编译成对应的CSS。

举个实际的例子 #

假设你的文件结构是这样的：

src/
└── components/
    └── my-react-component/
        ├── my-component.scss
        ├── A.scss
        └── B.scss

1. 组件的样式文件 my-component.scss：

@import './A.scss';

.my-component {
  padding: $spacer; // 直接使用A.scss中导入的Bootstrap变量
  background-color: $light-gray;
}

2. A.scss 文件：

@import 'bootstrap-sass/assets/stylesheet/bootstrap/_variables';
@import './B.scss';

.shared-box {
  border-radius: $border-radius;
}

3. B.scss 文件（比如存放自定义共享样式）：

.custom-text {
  font-size: $font-size-lg;
}

Stencil在编译组件时，会自动把这些嵌套导入的文件全部解析、合并，最终生成正确的组件样式，完全不用你手动合并文件。

注意事项 #

• 确保导入路径正确：相对路径要对应文件实际位置，第三方依赖（比如bootstrap-sass）的路径只要你已经通过npm/yarn安装了依赖，Stencil就能自动找到。
• 如果需要自定义Sass编译规则（比如添加全局变量、自定义函数），可以在stencil.config.ts中的sass选项里配置，默认情况下不需要额外调整就能支持嵌套导入。

内容的提问来源于stack exchange，提问作者Icare