search

chibat / chrome-extension-typescript-starter

Chrome Extension TypeScript Starter
MIT License
2.39k stars 403 forks source link

CSS Issues #47

Closed keremnalbant closed 1 year ago

keremnalbant commented 1 year ago

Hello, first of all, thank you for this amazing template. I want to use bootstrap react components and also bootstrap css for some styling. I installed bootstrap react and bootstrap packages via npm. Then I configured my webpack.config like this: { test: /\.css$/i, use: ["style-loader", "css-loader"], }, Then, when I enter a page, the bootstrap CSS that I've imported is overriding all the CSS rules of the page. I did some research but could not solve this problem. Any ideas? Thanks in advance.

manuel-ruiz-23 commented 1 year ago

@keremnalbant maybe you already fixed this but one solution is to use shadow dom to avoid css bleed, the project i use for it with react is https://www.npmjs.com/package/react-shadow this one

keremnalbant commented 1 year ago

I fixed it with shadow dom but many of the libraries are not fully compatible with shadow dom for example react-mentions, because of that I converted my extension to iframe. Thank you