浏览器扩展中的 CSS、Sass 与 Less

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["./styles/content.css"],
      "js": ["./scripts/content.ts"]
    }
  ]
}

import "./styles/popup.scss";

export default function initial() {
  const rootDiv = document.createElement("div");
  document.body.appendChild(rootDiv);
  const shadowRoot = rootDiv.attachShadow({ mode: "open" });

  const customFace = new FontFace(
    "Momo Signature",
    `url("${chrome.runtime.getURL("fonts/MomoSignature-Regular.woff2")}")`,
  );

  customFace
    .load()
    .then((face) => document.fonts.add(face))
    .catch(() => {
      // Ignore
    });

  return () => {
    document.fonts.delete(customFace);
    rootDiv.remove();
  };
}

{
  "web_accessible_resources": [
    {
      "resources": ["fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ]
}