When trying to use Semantic UI in a React based Chrome Extension (started with a boilerplate available from this repo), the Semantic UI CSS gets imported through index.js and ends up in the final build, however none of it seems to actually apply when you go to use any of the Semantic UI components. The CSS seems to appear in the final build, but never gets picked up for whatever reason.
It is important to note that the extension injects a div onto the website it's being used on and uses that div as a root div for React to render its components into. The typical popup that is used for chrome extensions is not currently being used for this extension (and hence makes no use of an HTML file to try and use the CDN version of semantic either).
What is even weirder, is that if you blanket copy-paste all of the CSS from node_modules/semantic-ui-css/semantic.css into public/css/root.css the styles get pulled through and actually do work, however this isn't a long-term solution.
So far I've tried importing semantic-ui-css into different parts of the extension, but to no avail. It's entirely possible that it is not working properly due to the webpack configuration (which is exactly the same as in the boilerplate), but I'm not entirely sure what to look for.
Any help with this would be greatly appreciated.
We had this exact same issue when creating our chrome extension in react using the described boilerplate code.
What you need to do is specifically add the 'app.css' and 'content.css' into the manifest. The actual path to these files is the post-build location, not the pre-build location so for content.css it will be
"/static/css/content.css"
check the build folder for the location in case your webpack is different. You will also need to add these files to the "web_accessible_resources" section too.
Your build file should include this to make it all work
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": [
"/css/root.css",
"/static/css/content.css",
"/static/css/app.css"
],
"js": ["/static/js/content.js"]
}
],
"web_accessible_resources": [
{
"resources": ["/static/css/content.css", "/static/media/*"],
"matches": ["<all_urls>"]
}
]