如何自定义ActiveAdmin Gem的CSS？找不到对应CSS文件怎么办？

为什么找不到默认CSS文件？ #

ActiveAdmin 1.1.0的默认样式是打包在gem内部的，并不会直接放在你的项目assets目录下，所以你在项目里找不到对应的CSS文件是正常现象。这些样式文件存放在gem的安装路径中，而非项目本地。

自定义样式的正确方式 #

要修改ActiveAdmin的颜色和设计，不需要直接修改gem内部的文件（升级gem会丢失修改），推荐通过以下两种方式自定义：

方法1：添加自定义样式文件（推荐）

1. 在app/assets/stylesheets/目录下新建文件，比如active_admin_custom.scss
2. 在文件中先导入ActiveAdmin的默认样式，再编写你的自定义规则：

@import "active_admin";

// 示例：修改头部背景色和主容器背景
.active_admin .header {
  background-color: #2d3748;
}
.active_admin body {
  background-color: #f7fafc;
}

3. 打开config/initializers/active_admin.rb，添加一行注册你的样式文件：

config.register_stylesheet 'active_admin_custom'

重启服务器后，自定义样式会自动覆盖默认样式。

方法2：替换默认样式入口文件

1. 先找到ActiveAdmin gem的安装路径，运行命令：

bundle show activeadmin

2. 进入该路径下的app/assets/stylesheets/目录，复制active_admin.scss到你的项目app/assets/stylesheets/目录
3. 修改复制后的active_admin.scss，可以调整导入的组件或直接添加自定义样式

查找CSS类的技巧 #

用浏览器开发者工具（F12）检查页面元素，就能看到ActiveAdmin使用的CSS类名。比如：

• 主容器：.active_admin
• 顶部导航栏：.header
• 侧边栏：.sidebar
• 按钮：.button

找到类名后，在自定义样式文件中编写对应的规则即可覆盖默认样式。

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