styles not working for content about chrome-extension-boilerplate-react-vite HOT 6 CLOSED

maybe this will help

• #16

from chrome-extension-boilerplate-react-vite.

Thank you for your contribution. We will check and reply to you as soon as possible.

from chrome-extension-boilerplate-react-vite.

in my case, i create a single style.scss file in content folder,

@import "./styles/xxxx.scss";
@include echo;
// ....

then configure it in vite.config.ts

 rollupOptions: {
      input: {
        // ....
        contentStyle: resolve(pagesDir, "content", "style.scss"),
      },
      output: {
        assetFileNames: "assets/[ext]/[name].chunk.[ext]",
      }
    },

finally, update manifest.ts

content_scripts: [ { css: assets/css/contentStyle.chunk.css, /*...*/ } ]
web_accessible_resources: [ { resources: [ "assets/css/*.css", /*...*/ ] } ]

of cource , u can set css by chrome API

chrome.scripting.insertCSS({
          files: ["assets/css/contentStyle.chunk.css"],
          target: {
            tabId,
          },
        })

from chrome-extension-boilerplate-react-vite.

awesome thank you! I got it working by manually compiling into contentStyle.css but wanted to make better use of vite, which this seems to take full advantage of. I'll try this out

from chrome-extension-boilerplate-react-vite.

@all-contributors please add @spencerc99 for bug

from chrome-extension-boilerplate-react-vite.

@Jonghakseo

I've put up a pull request to add @spencerc99! 🎉

from chrome-extension-boilerplate-react-vite.