Python自动化邮件引用CSS样式表样式不生效问题咨询

问题根本原因 #

绝大多数邮件客户端默认屏蔽外部CSS文件加载，且你使用的是本地磁盘路径的CSS文件，收件人设备不存在对应路径的文件，自然无法加载样式。此外大部分邮件客户端对<head>标签内的样式支持度极差，只有行内style属性的样式兼容性最高。

可行解决方案 #

• 样式内联处理
  你可以直接手动把所有CSS规则写到对应标签的style属性中，如果样式量较大，可使用Python的premailer库自动完成样式内联转换，操作步骤如下：
  1. 安装依赖库：

  pip install premailer
  

  2. 修改你的发信代码：

  from premailer import Premailer
  import datetime
  date = datetime.date.today().strftime("%Y-%m-%d")
  
  # 读取本地CSS文件内容
  with open(r"C:\Users\kings\PythonProjects\DailyEmail\css\normalize.css", encoding="utf-8") as f:
      normalize_css = f.read()
  with open(r"C:\Users\kings\PythonProjects\DailyEmail\css\taegans-groovy-site.webflow.css", encoding="utf-8") as f:
      webflow_custom_css = f.read()
  with open(r"C:\Users\kings\PythonProjects\DailyEmail\css\webflow.css", encoding="utf-8") as f:
      webflow_base_css = f.read()
  
  # 拼接原始HTML，把CSS写入<style>标签
  raw_html = f"""
  <head>
  <style>
  {normalize_css}
  {webflow_base_css}
  {webflow_custom_css}
  </style>
  </head>
  <body>
    <div class="pricing-section">
      <div class="container">
        <div class="title-block">
          <h1 class="heading">Pierce&#x27;s <span class="text-span">Passive Income Breakdown</span></h1>
        </div>
        <div class="pricing-wrap">
          <div class="pricing-column-02">
            <div class="pricing-card purple">
              <div class="div-block">
                <h3 class="pricing-h3 white">Helium</h3><img src="images/helium-hnt-logo.png" loading="lazy" width="53" id="w-node-_3b1efe47-cc49-dccf-fdc4-c9ae7d3a64ca-c7f2d992" srcset="images/helium-hnt-logo-p-500.png 500w, images/helium-hnt-logo-p-800.png 800w, images/helium-hnt-logo-p-1080.png 1080w, images/helium-hnt-logo-p-1600.png 1600w, images/helium-hnt-logo.png 2000w" sizes="53px" alt="">
              </div>
              <div class="pricing-details-wrap">
                <div class="pricing white"><h1>${strtotal}</h1></div>
                <div class="pricing white"><h1 style="color:purple;">${strtotal}</h1></div>
                <div class="date white">last 24 hours</div>
              </div>
              <div class="pricing-check-wrap">
                <div class="pricing-check">
                  <p class="pricing-text white"><strong>Expert Foggy Perch:</strong></p>
                </div>
                <div class="pricing-check">
                  <p class="pricing-text white _2">$8.00</p>
                </div>
                <div class="pricing-check">
                  <p class="pricing-text white"><strong>Macho Carrot Orca:</strong></p>
                </div>
                <div class="pricing-check">
                  <p class="pricing-text white _2">$8.00</p>
                </div>
                <p class="pricing-text white"><strong>Sneaky Chrome Dog:</strong></p>
                <p class="pricing-text white _2">$8.00</p>
              </div>
              <a href="https://explorer.helium.com/accounts/13pm9juR7WPjAf7EVWgq5EQAaRTppu2EE7ReuEL9jpkHQMJCjn9" class="pricing-button white w-button">Open Explorer</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  """
  
  # 自动将所有类对应的样式转换为行内style属性
  processed_html = Premailer(raw_html).transform()
  
  # 调用发信函数时传入处理后的processed_html即可
  def send_mail(text=" ", subject=('PKs Daily Overview ' + date), from_email='PKBot <piercedailymail@gmail.com>', to_emails=None, html=processed_html):
      # 你原有发信逻辑不变
      pass
  

• 图片资源处理
  你当前使用的是本地相对路径的图片，收件人同样无法加载，可将图片转换为Base64编码直接嵌入HTML，或是上传到公网可访问的存储位置后替换为公网链接。
• 注意事项
  你原有代码中引用的样式文件后缀写的是.cs，属于笔误，正确后缀应为.css，需要先修正这个错误。

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