如何在Hilla（Vaadin）项目中使用SCSS构建自定义主题

问题与已解决事项 #

我创建了新的Hilla React/SpringBoot项目，计划用SCSS构建自定义主题，需要修改默认Lumo主题并集成Bootstrap的SCSS样式与组件，但找不到Hilla使用Sass的最新资料（仅能找到少量Vaadin 7相关的不完整信息），此前的疑问及解决情况如下：

• 自定义Sass样式文件存放位置：已解决
• Sass解析器/CSS生成器配置：已解决，无需额外配置，只需在package.json中将sass列为开发依赖
• Bootstrap CSS文件的正确使用方式：已在package.json中添加Bootstrap依赖，但不确定该方法是否正确

已掌握的Hilla项目Sass使用方法 #

将Sass文件命名为类似themes/my-theme/my-styles.scss，然后在项目的styles.css中添加以下代码：

@import "my-styles.scss";

Bootstrap集成补充说明 #

若已在package.json中添加Bootstrap依赖，推荐直接在SCSS文件（如my-styles.scss）中引入Bootstrap的SCSS源文件，这样可以灵活自定义Bootstrap变量和样式，示例代码如下：

// 可选：自定义Bootstrap变量，覆盖默认值
$primary: #2c3e50;

// 引入Bootstrap完整SCSS
@import "../node_modules/bootstrap/scss/bootstrap";

这种方式既能复用Bootstrap的样式组件，也能更好地与Lumo主题配合调整，减少样式冲突。

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