styles not working? about chrome-extension-boilerplate-react-vite HOT 11 CLOSED

following up on this

I just noticed that some styles randomly just appeared within the inspect window- under injected stylesheet but it doesn't reference the actual style.scss.

The styles that show up are also outdated when compared to the source code... I've tried restarting the server but that didn't do anything

Oddly enough- uninstalling and reinstalling the extension did refresh the styles

I'm on the latest version btw

from chrome-extension-boilerplate-react-vite.

If you have written styles in the src/pages/content/style.scss file, you do not need to import that file in Demo/app.tsx.

This is what I have tried.

from chrome-extension-boilerplate-react-vite.

Hello, I understood your issue but can you share me your Webpack config?
I think this is a problem from webpack. some plugins are required.

from chrome-extension-boilerplate-react-vite.

This project uses vite, not webpack as far as I understand.

from chrome-extension-boilerplate-react-vite.

update on this- manually clicking the refresh button within chrome://extensions seems to fix the issue- but I'd assume this is still a bug since styles should be hot loading

from chrome-extension-boilerplate-react-vite.

Is there any way to load custom stylesheets that are placed outside of the src/pages/content directory?

from chrome-extension-boilerplate-react-vite.

@imvedanshmehra Have you tried importing in content/style.scss?

from chrome-extension-boilerplate-react-vite.

I'll give you an example to point to assets/style/index.css. I'm using tailwind btw.

You will need to adjust 2 files.

1. In the vite.config.ts
   contentStyle: resolve(assetsDir, "style", "index.css"), this will point to assets/style/index.css
   assetFileNames, there is a logic to rename the css file. You can rename the generated css to something you desired, should contain hash key. In my case:
   I've changed this

if (name === "contentStyle") {
  return `assets/css/contentStyle${cacheInvalidationKey}.chunk.css`;
}

To this

if (name === "styleIndex") {
  return `assets/css/styleIndex${cacheInvalidationKey}.chunk.css`;
}

2. You have to modify in the manifest.json file:
   Change from this

css: ["assets/css/contentStyle<KEY>.chunk.css"],

to this:

css: ["assets/css/styleIndex<KEY>.chunk.css"],

from chrome-extension-boilerplate-react-vite.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from chrome-extension-boilerplate-react-vite.

ture

from chrome-extension-boilerplate-react-vite.

If you have written styles in the src/pages/content/style.scss file, you do not need to import that file in Demo/app.tsx.

This is what I have tried.

2023-04-20.10.59.55.mov

@Jonghakseo
I tested using your method, but the style @pages/content/style.scss didn't work. Only tailwind css worked.

from chrome-extension-boilerplate-react-vite.