Storybook中绑定在:root的CSS darkmode变量被忽略如何解决

问题根因及解决方法 #

• 1. 全局CSS未正确引入Storybook上下文
     Storybook的预览环境独立于你的项目运行环境，不会自动加载你项目入口文件里引入的全局CSS。你需要在.storybook/preview.js顶部直接引入包含变量定义的CSS文件：

  // .storybook/preview.js 顶部添加
  import '../src/你的全局样式文件路径.css'
  

• 2. CSS注释语法不兼容
     你当前CSS里用的//是预处理器支持的单行注释语法，不属于原生CSS标准规范。如果你的生产环境有预处理器做转译，而Storybook的CSS处理规则没有匹配对应逻辑，会导致注释后的规则解析异常被忽略。把所有//替换为标准的/* */注释即可：

  /* Default theme (light mode) */
  :root {
    /* Typography */
    --col-body-text: #0b0c0c;
    --col-body-text-light: #505a5f;
  }
  
  /* Dark mode theme */
  :root.dark {
    /* Typography */
    --col-body-text: #c5c5c5;
    --col-body-text-light: #f8f8f8;
  }
  

• 3. 规则优先级被Storybook默认样式覆盖
     Storybook自身的主题也会给:root设置CSS变量，优先级高于你的自定义规则时就会覆盖你的变量定义。你可以通过提升选择器优先级解决：

  /* 双重:root选择器提升优先级，确保自定义变量生效 */
  :root:root.dark {
    --col-body-text: #c5c5c5;
    --col-body-text-light: #f8f8f8;
  }
  

• 4. 快速排查冲突方法
     打开Storybook预览页的开发者工具，选中<html>元素，切换暗模式确认.dark类正常添加后，在样式面板搜索对应的变量名，就能直接看到变量被哪条规则覆盖，定位具体冲突来源。

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