Julia REPL运行Dash时外部样式表不生效如何解决？

问题描述 #

在Julia REPL中运行以包形式组织的Dash应用时，外部样式表会被忽略无法生效，已尝试两种方案：使用内联样式、在应用初始化阶段将样式文件添加到外部样式表数组中，均未解决问题。

效果对比 #

• REPL运行效果：
• 命令行运行效果：

现有项目结构 #

- src
  - assets
    - style.jl
  - app.jl
- test

现有代码 #

App.jl 代码片段

controls = dbc_row([
    dbc_col(
        dbc_select(
            id="countries-dropdown",
            options = dropdownOptions,
            value="Global",
            style = Dict("color" => "black"),
        ),
        width="6",
    ), 

    dbc_col(
        dcc_datepickersingle(
            id = "date-picker",
            min_date_allowed = startDate,
            max_date_allowed = endDate,
            date = endDate,
            display_format="Do MMM YY",
        ),
        style = Dict("padding-left" => "10px"),
        width="6",
    ),
],
className = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
)

assets/style.css 代码

.DateInput_input, .DateInput_input_1 {
    text-align: center;
    font-size: inherit ! important;
    Height: 35px !important;
    Width: 100% !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

解决方案 #

问题核心是静态资源加载路径配置错误，附带几处容易踩的语法坑，按以下步骤修复即可：

1. 修正文件命名错误
   你当前目录结构中assets文件夹下的文件是style.jl，后缀为Julia代码格式，浏览器无法识别为CSS样式表，需要将文件重命名为style.css，和你编写的样式文件后缀一致。
2. 修正静态资源路径配置
   Dash默认自动加载静态资源的逻辑是扫描启动Julia进程时的工作目录下的assets文件夹，你现在把assets放在src目录下，REPL启动时如果工作目录不是src，就无法扫描到样式文件。你可以二选一解决：
   • 方案一：使用默认加载逻辑
     将assets文件夹移动到你启动Julia REPL时所在的项目根目录，重启应用即可自动加载样式。
   • 方案二：随源码管理静态资源
     如果要把assets和源码一起放在src目录下，初始化Dash app时显式指定assets_folder参数，通过@__DIR__宏固定路径，不依赖REPL的启动位置：

     app = dash(
         # 保留你原来的其他初始化参数
         assets_folder = joinpath(@__DIR__, "assets")
     )
     

3. 修正CSS非标准写法
   你当前的CSS存在不符合规范的写法，部分浏览器会解析失败，建议修改：
   • 删掉! important中间的多余空格，改为标准写法!important
   • CSS属性名统一使用小写（Height改为height、Width改为width），避免大小写兼容问题
     修正后的CSS代码如下：

   .DateInput_input, .DateInput_input_1 {
       text-align: center;
       font-size: inherit !important;
       height: 35px !important;
       width: 100% !important;
       padding-left: 3px !important;
       padding-right: 3px !important;
   }
   

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