英文:
Can't link a local CSS file for a HTML UI. Figma plugin development
问题
I want to use this UI library which was introduced in Figma’s official tutorial for plugin development.
https://github.com/thomas-lowry/figma-plugin-ds
I installed this library with NPM.
But I can’t link the CSS file.
Here’s my html code.
<link rel="stylesheet" href="node_modules/figma-plugin-ds/dist/figma-plugin-ds.css">
The path for the href is not wrong, because VS Code can follow the link.
I tried to put the link tag in the head tag, but it didn’t work.
Plus, if I use CDN for the CSS like this, it works.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css"
/>
But I don’t want to use this, because of the delay of style adjustment. It makes the UI blink.
What am I doing wrong? I want to link this CSS file in my local!
Thank you.
For your information,
Figma plugin renders my html file in an iframe.
Here's the rendered structure
(other tags for the whole figma UI)
<iframe ...>
<html>
<head>
<script></script>
<style></style> <= Figma generates this part automatically
<link ...></link> <= where my custom link tag should be
</head>
<body>
(my plugin UI is here)
What I have tried:
-
I tried to put the link tag in and out of the head tag.
-
I tried to link another CSS file outside the node_modules folder.
英文:
I want to use this UI library which was introduced in Figma’s official tutorial for plugin development.
https://github.com/thomas-lowry/figma-plugin-ds
I installed this library with NPM.
But I can’t link the CSS file.
Here’s my html code.
<link rel="stylesheet" href="node_modules/figma-plugin-ds/dist/figma-plugin-ds.css">
The path for the href is not wrong, because VS Code can follow the link.
I tried to put the link tag in head tag, but it didn’t work.
Plus, if I use CDN for the CSS like this, it works.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css"
/>
But I don’t want to use this, because of the delay of style adjustment. It makes the UI blink.
What am I doing wrong? I want to link this CSS file in my local!
Thank you.
For your information,
Figma plugin renders my html file in an iframe.
Here's the rendered structure
(other tags for whole figma UI)
<iframe ...>
<html>
<head>
<script></script>
<style></style> <= Figma generates this part automatically
<link ...></link> <= where my custom link tag be
</head>
<body>
(my plugin UI is here)
What I have tried:
-
I tried to put the link tag in and out of head tag.
-
I tried to link another CSS file outside the node_modules folder.
答案1
得分: 2
我遇到了相同的问题，无法通过npm install解决。但也许这种方法对你有帮助，如果你正在按照Figma插件教程视频进行操作。
步骤1：将以下行添加到你的ui.html文件的顶部：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css">
步骤2：在你的manifest.json文件中，在"ui":"ui.html"下添加以下内容：
"networkAccess": {
"allowedDomains": [
"https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/"
]
}
英文:
I had the same problem and was not able to get it working with the npm install. But maybe this way will be helpful if you're following the figma plugin tutorial video.
Step 1: Add this line to the top of your ui.html file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css">
Step 2: Add this under "ui": "ui.html" in your manifest.json file:
"networkAccess": {
"allowedDomains": [
"https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/"
]
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论