Jak používat moduly CSS s aplikací Create React

Krátká odpověď: nemůžete. Musíš ⏏

 ⏏

Aktualizace 18. ledna 2018: Podpora modulu CSS se objevila v alfa sestavách aplikace Create React App v2 .

Zde je návod, jak používat moduly CSS s Create React App v2!

Pokud potřebujete přidat moduly CSS ke starší instanci v1 CRA, přečtěte si ji dále.

Facebook Create Createct App je skvělý způsob, jak rychle začít s novým projektem React. Podporuje mnoho smysluplných a populárních výchozích hodnot. Pokud však chcete přidat nepodporovanou funkci - například krok preprocesoru CSS, jako jsou například moduly CSS - musíte se vysunout a vydat se sami.

Tento článek vysvětluje, jak používat moduly CSS v aplikaci Create React App….

Zahájení nového projektu pomocí Create React App (zkrátka to nazývám CRA) znamená, že již nemusíte spravovat spoustu modulů uzlů a matoucí konfigurace webového balíčku. Po globální instalaci CRA ($arn global add create-rea-app) je zahájení nového projektu stejně snadné jako:

$ create-rea-app myApp
$ cd myApp /
$ začátek příze

Pěkný detail je, že CRA se neustále aktualizuje, takže byste neměli nikdy potřebovat manuální aktualizaci globálního balíčku create-reagovat-app.

Jděte svou vlastní cestou

Z těchto malých příkazů získáte spoustu energie. Bohužel, pokud chcete dělat něco mimo to, co vám CRA nabízí, musíte jít svou vlastní cestou.

Říká se, že příkaz „eject“ byl téměř nazván „break-the-chain“

příkaz 'eject` ⏏

Create React App přichází s praktickým malým příkazem pro ty z nás, kteří mají vlastní názory na ingredience skvělého nastavení React: příkaz eject:

$ vysunutí příze

README Create React App je docela jasné o výhodách a nevýhodách vysunutí:

Poznámka: jedná se o jednosměrnou operaci. Jakmile se vysunete, nemůžete se vrátit!
Pokud nejste spokojeni s výběrem nástroje pro sestavení a možností konfigurace, můžete jej kdykoli vysunout. Tento příkaz odstraní závislost jednoho sestavení z vašeho projektu.
Místo toho zkopíruje všechny konfigurační soubory a tranzitivní závislosti (Webpack, Babel, ESLint atd.) Přímo do vašeho projektu, abyste nad nimi měli plnou kontrolu. Všechny příkazy kromě vysunutí budou stále fungovat, ale budou ukazovat na zkopírované skripty, abyste je mohli vyladit. V tuto chvíli jste sami.
Nemusíte nikdy používat vysunutí. Sada kurátorů je vhodná pro malé a střední nasazení a neměli byste se cítit povinni tuto funkci používat. Chápeme však, že tento nástroj by nebyl užitečný, pokud byste jej nemohli přizpůsobit, až na něj budete připraveni.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject

Navrhuji, abyste si to pozorně přečetli a rozhodli se, zda jste připraveni rozdělit se.

Co se stane, když se vysunete

$ vysunutí příze
Opravdu chcete vysunout? Tato akce je trvalá. [y / N]
> y
Vysunutí ...
Kopírování souborů do / Users / user / src / myApp

Nahrazuje to samostatnou závislost vašeho projektu na reakčních skriptech množstvím balíčků, na kterých CRA závisí. Přesune také některé skripty a konfigurace do vašeho projektu. Nyní máte plnou kontrolu nad svým projektem.

Spuštění stavu Git v projektu po spuštění vysunutí příze ukazuje postižené soubory a adresáře:

$ git status
Změny nejsou stanoveny pro potvrzení:
 změněno: package.json
Nesledované soubory:
 config /
 skripty /

Potvrďte tyto změny a jste připraveni konfigurovat moduly CSS.

Moduly CSS

Nebudu vám říkat, jak skvělé jsou moduly CSS. Předpokládám, že už jsi osvícený. Pokud ne, přečtěte si to. Má nejlepší ilustrace:

Už to nemusíme intenzivně myslet na CSS.

Pojďme naskočit a nechte si nainstalovat moduly CSS správně?

Instalace modulů CSS

Štěstí! Ukázalo se, že projekt generovaný vysunutím z CRA zahrnuje všechny uzlové moduly, které potřebujeme, aby byly moduly CSS spuštěny ve Webpacku. Nemusíme instalovat žádné další závislosti!

Konfigurace modulů CSS

Najděte sekci css-loader ve svém webovém balíčku dev config (config / webpack.config.dev.js: 186 v době psaní) a změňte část možností takto:

// před
{
  loader: requ.resolve ('css-loader'),
  možnosti: {
    importLoaders: 1,
  },
},
// po
{
  loader: requ.resolve ('css-loader'),
  možnosti: {
    importLoaders: 1,
    moduly: true,
    localIdentName: "[jméno] __ [místní] ___ [hash: base64: 5]"
  },
},

Udělejte to samé ve své konfiguraci výroby Webpack (config / webpack.config.prod.js: 191):

// před
{
  loader: requ.resolve ('css-loader'),
  možnosti: {
    importLoaders: 1,
    minimalizovat: true,
    sourceMap: true,
   },
},
// po
{
  loader: requ.resolve ('css-loader'),
  možnosti: {
    importLoaders: 1,
    moduly: true,
    minimalizovat: true,
    sourceMap: true,
   },
},

Poznámka: můžete ponechat localIdentName mimo vaši produkční konfiguraci a dostanete výchozí formát názvu třídy, který je jen ošklivý [hash: base64].

A to je vše!

Pokud nyní spustíte přízi, uvidíte, že vaše aplikace je nyní zcela nečinná. Paradoxně to znamená jeho fungování.

Aktualizujte své classNames pro použití modulů CSS

Vaše aplikace vypadá tak brutálně, protože nyní musíte ve svých komponentách používat moduly CSS. Nejprve otevřete součásti a proveďte několik změn:

  1. Přiřaďte importované styly k stylům importu lokálních konstant z './SomeComponent.css'.
  2. Nahrazuje řetězce className ve vašem JSX indexy objektů className = {styles.myClass}.
  3. Moduly CSS nepovolují pomlčky („-“) v názvech tříd, takže budete muset aktualizovat všechny třídy, které používají pomlčku. Tuto změnu budete muset provést jak v CSS, tak v JSX, ale pěkný bonus je, že názvy tříd budou jednodušší -. Například hlavička APP se stane pouhým záhlavím.

Jak vypadá komponenta aplikace src / App.jsx:

Před moduly CSS:

importovat React, {Component} z 'reagovat';
importovat logo z './logo.svg';
import './App.css';
třída aplikace rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        
          logo           

Vítejte v Reactu

        
        

          Chcete-li začít, upravte src / App.js a uložte jej znovu načtením.         

      
    );   } }
exportovat výchozí aplikaci;

Po modulech CSS:

importovat React, {Component} z 'reagovat';
importovat logo z './logo.svg';
importovat styly z './App.css';
třída aplikace rozšiřuje komponentu {
  poskytnout() {
    vrátit se (
      
        
          logo           

Vítejte v Reactu

        
        

          Chcete-li začít, upravte src / App.js a uložte jej znovu načtením.         

      
    );   } }
exportovat výchozí aplikaci;

Jsi teď sám

Jsi hotový! Už žádné vytvoření aplikace React. Nyní můžete používat libovolný CSS Preprocessor, jaký chcete. Už jsi dospělý.

Pokud ještě nejste připraveni vysunout, vím o alespoň jednom dalším přístupu, který vám umožní přidat podporu CSS modulu bez vysunutí. Ale to přidá další závislost na vašem projektu, který jde proti bodu lepení s CRA.

Doufám, že vám tento malý tip pomohl. Nebo jste se alespoň bál vyhazovat. A samozřejmě, pokud víte o lepším způsobu použití modulů CSS s aplikací Create React, dejte mi vědět v komentářích!

Další čtení

  • Vytvořit aplikaci React: https://github.com/facebookincubator/create-react-app
  • Moduly CSS: https://glenmaddern.com/articles/css-modules
  • Webpack: https://webpack.github.io/

5. července 2017 - příklady aktualizovány tak, aby používaly konfigurační syntaxi Webpack 3 (díky Tomu Lakerovi a Annie Pennell)