Figma插件开发：无法引入本地CSS文件求助

你遇到的核心问题是Figma插件的沙箱运行环境无法直接访问项目中的node_modules目录。VS Code能识别路径是因为它基于本地文件系统解析，但Figma插件运行在独立的iframe沙箱中，只会加载你明确打包或复制到插件资源目录里的文件，node_modules作为开发依赖目录，默认不会被包含到插件的最终运行包中，所以浏览器找不到该路径。

以下是几种可行的本地引入方案，按推荐程度排序：

1. 使用打包工具嵌入CSS（最推荐） #

如果你的插件使用Webpack、Vite这类打包工具，直接在主JS文件中导入CSS：

import 'figma-plugin-ds/dist/figma-plugin-ds.css';

打包工具会自动将CSS内容处理到最终构建产物中（要么内联到JS里，要么生成单独的CSS文件并自动关联），插件运行时可直接加载样式，完全避免延迟。

2. 手动复制CSS到静态资源目录 #

把node_modules/figma-plugin-ds/dist/figma-plugin-ds.css复制到插件的静态资源文件夹（比如src/assets/styles），然后在HTML中引用这个复制后的相对路径：

<link rel="stylesheet" href="assets/styles/figma-plugin-ds.css">

注意要确保该文件被包含到插件的打包输出中（比如在manifest.json的files字段里配置对应路径）。

3. 内联CSS到HTML #

直接把figma-plugin-ds.css的全部内容复制到HTML的<style>标签里：

<head>
  <style>
    /* 粘贴figma-plugin-ds.css的所有内容 */
  </style>
</head>

这种方式完全消除外部样式加载延迟，不会出现UI闪烁，但缺点是HTML文件体积会变大，后续更新样式需要重新复制内容。

你之前尝试的node_modules路径无效，本质是因为Figma插件的运行环境与本地开发环境的文件结构不一致。插件打包后仅包含你指定的资源文件，node_modules是开发阶段的依赖目录，不会被自动打包进插件，因此沙箱中的iframe无法找到该路径。

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