Rails 7导入Selectize Bootstrap5样式报错：找不到要导入的样式表

问题原因 #

selectize.bootstrap5.scss内部使用相对路径@import "lib/bootstrap5/functions";导入依赖，但Sass编译时默认从你的application.scss所在目录（app/assets/stylesheets）查找文件，而非@selectize/selectize/dist/scss目录，导致找不到对应样式文件。

解决方案 #

方案1：扩展Sass的加载路径 #

修改你的Sass编译命令，将Selectize的SCSS目录添加到--load-path参数中，让Sass能正确解析内部相对导入：

sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --load-path=node_modules/@selectize/selectize/dist/scss

添加--load-path=node_modules/@selectize/selectize/dist/scss后，Sass会优先在该目录下查找lib/bootstrap5/functions.scss，匹配到正确的文件。

方案2：使用绝对路径导入依赖（临时 workaround） #

如果不想修改编译命令，可以在application.scss中先手动导入functions.scss的绝对路径，再导入Bootstrap5主题样式：

@import "@selectize/selectize/dist/scss/selectize";
// 先导入依赖的functions文件
@import "@selectize/selectize/dist/scss/lib/bootstrap5/functions";
// 再导入Bootstrap5主题
@import "@selectize/selectize/dist/scss/selectize.bootstrap5";

这种方式会让Sass先找到functions.scss，后续selectize.bootstrap5.scss中的相对导入会命中已加载的文件（避免重复编译）。

方案3：使用CSS Bundling for Rails的默认配置（推荐） #

如果你用的是Rails官方的cssbundling-rails gem，无需手动写Sass命令，只需在package.json中配置正确的脚本：

{
  "scripts": {
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules --load-path=node_modules/@selectize/selectize/dist/scss"
  }
}

之后运行yarn build:css即可自动完成编译，后续rails assets:precompile也会自动调用该脚本。

验证 #

执行编译命令后，检查app/assets/builds/application.css是否包含Selectize Bootstrap5的样式，同时确认无导入错误。

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