Rails7环境下能否在CSS类中引用其他CSS类？含Bootstrap场景报错求助

核心结论 #

完全可以在一个CSS类中“引用”其他类来减少重复代码，Sass的@extend或LESS的&:extend()都能实现你要的效果。你之前遇到的「目标选择器未找到」错误，是因为引入的是压缩后的Bootstrap CSS文件，预处理器无法识别压缩后的选择器作为扩展目标，必须引入Bootstrap的预处理器源文件。

一、用Sass（Rails资产管道默认支持）实现 #

1. 调整Bootstrap引入方式 #

移除原有的bootstrap.min.css引入，改用Bootstrap的Sass源文件：

• 在Gemfile中添加Bootstrap gem：

gem 'bootstrap', '~> 5.3'

• 运行bundle install安装依赖
• 在app/assets/stylesheets/application.scss中替换原有CSS引入为Sass源文件导入：

// 移除原来的 *= require bootstrap.min.css
@import "bootstrap";

2. 使用@extend复用Bootstrap类 #

在footer_styles.scss中直接扩展需要的Bootstrap类：

.footer-section {
  @extend .col-lg-3;
  @extend .col-md-6;
  @extend .mb-5;
  @extend .mb-lg-0;
}

这样你的.footer-section类就会继承所有指定Bootstrap类的样式，后续只需要修改这个类的扩展列表就能统一调整样式。

二、LESS在Rails7资产管道中的用法 #

如果你偏好LESS，需要额外配置资产管道支持：

1. 安装LESS依赖 #

在Gemfile中添加LESS Rails集成gem：

gem 'less-rails'

运行bundle install完成安装。

2. 引入Bootstrap LESS源文件 #

下载Bootstrap的LESS源文件包，将其中的bootstrap.less及相关文件放到app/assets/stylesheets目录下。

3. 使用LESS的&:extend()语法 #

将你的样式文件改为.less后缀（比如footer_styles.less），然后编写：

.footer-section {
  &:extend(.col-lg-3, .col-md-6, .mb-5, .mb-lg-0);
}

最后在application.less中导入Bootstrap和你的样式文件：

@import "bootstrap.less";
@import "footer_styles.less";

替代方案（无需预处理器源文件） #

如果不想引入Bootstrap预处理器源文件，可以用CSS自定义属性（变量）配合聚合类，但这种方式需要手动同步Bootstrap的样式值，不如预处理器扩展灵活：

.footer-section {
  // 手动复制Bootstrap类的样式值，用变量统一管理
  @media (min-width: 992px) {
    flex: 0 0 auto;
    width: 25%;
    margin-bottom: 0;
  }
  @media (min-width: 768px) and (max-width: 991.98px) {
    flex: 0 0 auto;
    width: 50%;
  }
  margin-bottom: 1.5rem;
}

但更推荐用预处理器扩展的方式，能直接同步Bootstrap的更新，避免手动维护样式值。

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