Rails 7，Bootstrap 5 - 错误：找不到目标选择器答案

【问题标题】：Rails 7, Bootstrap 5 - Error: The target selector was not foundRails 7，Bootstrap 5 - 错误：找不到目标选择器
【发布时间】：2022-08-10 04:58:22
【问题描述】：

在一个全新的 Rails 7.0.3 应用程序中，安装了 Bootstrap 5.1.3，在加载基本视图时，我一直遇到以下错误：

SassC::SyntaxError in Events#index
Showing /app/views/layouts/application.html.erb where line #9 raised:
Error: The target selector was not found.
       Use \"@extend .input-group-append !optional\" to avoid this error.
        on line 214 of app/assets/stylesheets/custom.scss
>>       @extend .input-group-append, .input-group-text;

随着：

Extracted source (around line #214):
.count {
      @extend .input-group-append, .input-group-text;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

我查看了https://stackoverflow.com/questions/31232499/selector-not-found-when-extending-bootstrap，它为 Rails 5 和 Rails 6 提供了解决方案，但它并没有解决问题（我认为这是由于在这三个不同版本的 Rails 中不同的资产管理操作方式）。

那篇文章看起来很有希望，但按照这些步骤也没有解决问题（我想知道解决方案在我的案例中没有解决问题的原因是否是因为我没有使用--css=bootstrap 创建我的 Rails 应用程序）。

这是我目前所拥有的：

Gemfile

# Bundle edge Rails instead: gem \"rails\", github: \"rails/rails\", branch: \"main\"
gem \"rails\", \"~> 7.0.3\"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem \"sprockets-rails\"

# Use sqlite3 as the database for Active Record
gem \"sqlite3\", \"~> 1.4\"

# Use the Puma web server [https://github.com/puma/puma]
gem \"puma\", \"~> 5.0\"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem \"importmap-rails\"

# Hotwire\'s SPA-like page accelerator [https://turbo.hotwired.dev]
gem \"turbo-rails\"

# Hotwire\'s modest JavaScript framework [https://stimulus.hotwired.dev]
gem \"stimulus-rails\"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem \"jbuilder\"

# Bootstrap
gem \"bootstrap\"

application.css

/*
 * This is a manifest file that\'ll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin\'s
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You\'re free to add application-wide styles to this file and they\'ll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

custom.scss

// Import Bootstrap Styles

@import \"bootstrap\";

application.html.erb

<%= stylesheet_link_tag \"application\", \"data-turbo-track\": \"reload\" %>
<%= javascript_importmap_tags %>

我没有application.scss 文件。

任何帮助找出我所缺少的东西都会受到赞赏。谢谢你。

标签： ruby-on-rails twitter-bootstrap sass

【解决方案1】：

看起来您的应用程序中没有安装 scss，这不会让这条线工作

@extend .input-group-append, .input-group-text;

Rails 7 与 CSS 和 JS 的联系更加紧密。我会查看this 的答案并选择如何让 scss 与 BS5 一起在您的应用程序中运行

【讨论】：