Drupal 7中添加CSS文件的方法及添加后未生效问题排查

Drupal 7添加CSS的正确方法 #

分主题和模块两种场景来说：

1. 在主题中添加CSS

静态添加（通过.info文件）

这是最常用的方式，直接在主题的.info文件里添加对应行：

# 全局加载（所有媒体类型）
stylesheets[all][] = css/global.css
# 仅针对打印媒体加载
stylesheets[print][] = css/print.css
# 仅针对屏幕媒体加载
stylesheets[screen][] = css/screen.css

路径是相对于主题根目录的，比如你的主题在sites/all/themes/mytheme，那css/global.css对应的实际路径就是sites/all/themes/mytheme/css/global.css。

动态添加（通过template.php）

如果需要在特定页面或条件下加载CSS，可以在主题的template.php里用drupal_add_css()函数：

function mytheme_preprocess_page(&$variables) {
  // 全局加载自定义CSS
  drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/custom.css');
  
  // 仅在node/1页面加载特定CSS
  if (arg(0) == 'node' && arg(1) == '1') {
    drupal_add_css(drupal_get_path('theme', 'mytheme') . '/css/node-1.css');
  }
}

2. 在模块中添加CSS

静态添加（通过.info文件）

和主题类似，在模块的.info文件里添加：

stylesheets[all][] = css/module-styles.css

路径相对于模块根目录，比如模块在sites/all/modules/mymodule，对应文件路径就是sites/all/modules/mymodule/css/module-styles.css。

动态添加（通过模块钩子）

可以在模块的初始化钩子或预处理函数里动态加载：

// 模块初始化时全局加载CSS
function mymodule_init() {
  drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule.css');
}

// 仅在模块专属页面加载CSS
function mymodule_preprocess_page(&$variables) {
  if (arg(0) == 'mymodule') {
    drupal_add_css(drupal_get_path('module', 'mymodule') . '/css/mymodule-page.css');
  }
}

快速排查步骤建议 #

1. 先检查.info文件的语法和路径，确保没有拼写错误，且文件实际存在于对应路径下；
2. 确认当前启用的主题/模块是你修改的那个；
3. 彻底清空所有缓存（包括CSS聚合缓存）；
4. 暂时关闭CSS聚合（「配置→性能」里取消勾选「优化CSS文件」），刷新页面看源代码里有没有新的CSS链接；
5. 检查CSS文件的服务器权限是否正常。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan