Generowanie wielu plików CSS

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.

https://www.npmjs.com/package/extract-text-webpack-plugin

Ten plugin jest przestarzały i nie pasuje do Twojej wersji webpacka.

Autorzy tego pluginu w ramach zastępstwa polecają to https://github.com/webpack-contrib/mini-css-extract-plugin

Nie wrzuciłeś konfiguracji webpacka, więc nie wiem, czy zadziała i uruchomi się bez problemów. Musisz to skonfigurować i przetestować samemu.

@Xarviel: nie wrzuciłem konfiguracji, bo ma około 700 linii. I to mnie zastanawia, bo w większości przykładów mają dużo mniej.
To moja konfiguracja https://github.com/zerakot/webpack/blob/main/webpack.config.js

Tutaj masz dokumentacje wtyczki https://github.com/webpack-contrib/mini-css-extract-plugin z wyjaśnieniem wszystkich dostępnych opcji i listą przykładów jak one działają.

Widzę, że używasz jej już jako loader (https://github.com/zerakot/webpack/blob/main/webpack.config.js#L112), więc oprócz tego musisz ją dodać jeszcze do sekcji plugins

plugins: [
  new MiniCssExtractPlugin(),
  /*
    ewentualnie z dodatkową konfiguracją
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  */
],

i potestować

@Xarviel: jeśli mam dodać ten fragment kodu do tablicy na linijce https://github.com/zerakot/webpack/blob/792c4bf9967a2597e9ba508eb94c80aa85ea5fb5/webpack.config.js#L323 to wyskakuje mi błąd "invalid value used in weak set". Pewnie problem jest łatwy do rozwiązania, ale zupełnie na webpacku się nie znam.

Gouda105 napisał(a):

Pewnie problem jest łatwy do rozwiązania, ale zupełnie na webpacku się nie znam.

To jest nas dwóch :D

W swoich projektach staram się unikać webpacka i korzystać z czegoś nowszego, gdzie nie ma tyle niepotrzebnego kombinowania

1. parcel (https://www.npmjs.com/package/parcel),
2. microbundle (https://www.npmjs.com/package/microbundle)
3. rollup (https://www.npmjs.com/package/rollup)

i wybieram coś z wyżej wymienionej trójki w zależności od potrzeb.

Pewnie dałoby się przepisać obecną konfiguracje w kilkanaście linijek, zamiast się męczyć z webpackiem, który ma 700 :D

Gouda105 napisał(a):

@Xarviel: jeśli mam dodać ten fragment kodu do tablicy na linijce https://github.com/zerakot/webpack/blob/792c4bf9967a2597e9ba508eb94c80aa85ea5fb5/webpack.config.js#L323 to wyskakuje mi błąd "invalid value used in weak set".

Co do błędu to https://github.com/webpack-contrib/mini-css-extract-plugin/issues/779#issuecomment-996747753
Nie wiem, czy faktycznie takie jest rozwiązanie, ale według issue z githuba masz coś źle w pliku package.json. Jakaś paczka możliwe, że jest nieprawidłowa, ciężko powiedzieć.

EDIT:
https://github.com/zerakot/webpack/blob/792c4bf9967a2597e9ba508eb94c80aa85ea5fb5/webpack.config.js#L624
Masz to też użyte w 624 linijce z flągą isEnvProduction, więc może jednak tutaj to powinno być?

Jeśli pozbędziesz się tej flagi to wtedy podczas buildu prod / dev, wtyczka będzie działać tak samo

 isEnvProduction && new MiniCssExtractPlugin({
    filename: 'static/css/[name].css',
    chunkFilename: 'static/css/[name].chunk.css',
  })

na

new MiniCssExtractPlugin({
  filename: 'static/css/[name].css',
  chunkFilename: 'static/css/[name].chunk.css',
})