我正在尝试编写一个浏览器扩展，它将一些按钮和自定义组件注入到网站中，因此我想使用Tailwind(和DaisyUI(来对它们进行样式设置。
我发现了这个讨论，并根据解决方案配置了我的项目，我让Tailwind和DaisyUI为我的扩展弹出窗口工作。我的App.css看起来像
@tailwind base;
@tailwind components;
@tailwind utilities;
这将在我的Popup.tsx中导入import "../App.css";。没有问题。
但是，当我尝试在内容脚本中执行相同的导入时，我不会收到任何错误，但脚本不知何故失败了/根本无法执行。如果我在不导入App.css的情况下放入console.log，它就会被打印出来。如果我导入App.css，它将不再显示。
这可能是我的webpack/postoss配置出错，还是有其他原因阻止我在内容脚本中使用自定义CSS？我很困惑，因为它在弹出窗口中工作没有任何问题。
编辑：无论我试图在内容脚本中加载什么CSS文件，问题似乎都会出现。
我遇到了同样的问题，但希望我找到了解决方案。
在我的webpack配置中，我在plugins部分指定了要将名为tailwind.css的文件复制到dist中。
我的文件结构
src/
- ContentScript.tsx (imorting tailwind.css)
- tailwind.css
-- output is generated below
dist/
js/
contentScript.js
tailwind.css
manifest.json
在webpack.config.js中
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
// Other config goes there
plugins: [
new CopyPlugin({
patterns: [
{
from: "src/tailwind.css",
to: "./",
},
],
}),
],
}
在manifest.json中
{
// other config
"content_script": [
{
// your config
"css": ["js/tailwind.css"],
"js": ["js/contentScript.js"]
}
],
"web_accessible_ressources": [
{"resources": ["js/*"]}
]
}