Witam,
trochę się już męczę z tym Webpackiem. Otóż tworzę wtyczkę do Chrome przy użyciu Reacta. Aby oddzielić style między otwartą stroną, a moim content script, cała zawartość wtyczki osadzona jest w iframe. Struktura wygląda podobnie do tego: #root -> iframe -> wstrzyknięte "okienko". Teraz problem jest taki - aby w wstrzykniętym okienku CSS mógł się pojawić używam react-frame-component:
<Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/main.css")} ></link>]}}>
domyślnie chciałbym, żeby za styl wnętrza iframe odpowiadał skrypt content.css, ale o tym zaraz.
Do wystylizowania iframe (aby je wypozycjonować na stronie) chciałbym użyć App.css, który zostanie przekazany w manifeście.
I tu problem. Kiedy uruchomię npm run build (node scripts/build.js), App.css i content.css się łączą. Ani przy tworzeniu iframe, ani w manifeście nie mogę użyć osobnych nazw, tylko main.css. Co mogę z tym zrobić? Próbowałem wielu rozwiązań, np. to, ale w tym przypadku pojawiał się błąd
Error: Cannot find module ‘extract-text-webpack-plugin’
, który nawet po użyciu
npm install --save extract-text-webpack-plugin
nie znikał, bo wtedy pojawiał się kolejny błąd, który umieszczam w screenshocie poniżej.