如何在Joomla4中覆盖Bootstrap的_visually-hidden.scss显示语言选择器文本

问题背景 #

我使用Joomla4搭配RSJoomla模板时，发现语言选择器的文本被Bootstrap的_visually-hidden.scss文件隐藏，该文件路径为\media\vendor\bootstrap\scss\helpers\_visually-hidden.scss，相关代码如下：

//
// Visually hidden
//

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  @include visually-hidden();
}

我希望让该文本指示器可见，但尝试用常规CSS覆盖此样式未成功。不想删除该SCSS文件（避免影响其他功能），也担心系统或Bootstrap更新会覆盖修改，求简单的覆盖方法（我不熟悉SCSS代码）。

解决方案 #

方法1：使用Joomla自带自定义CSS功能（推荐） #

1. 登录Joomla后台，进入「系统」→「模板管理」→「样式」。
2. 找到当前启用的RSJoomla模板，点击「模板选项」或「自定义代码」（不同模板界面略有差异）。
3. 在「自定义CSS」输入框中添加以下代码：

/* 显示语言选择器的隐藏文本 */
.mod-languages .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

4. 保存设置后刷新前端页面，语言选择器文本即可正常显示。

方法2：添加独立自定义CSS文件 #

如果模板支持，可在RSJoomla模板的css目录下新建custom.css文件，将上述CSS代码写入其中。多数Joomla模板会自动加载该文件，无需额外配置。

说明 #

常规CSS覆盖失败的原因是Bootstrap的.visually-hidden样式优先级较高，通过给选择器添加语言模块的父类.mod-languages并使用!important，可以确保自定义样式优先级足够，同时不会影响其他页面中使用.visually-hidden类的元素。

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