Creando un applicazione react con il comando create-react-app ed includendo successivamente typescript ci si può imbattere in un problema piuttosto fastistidioso: l’impossibilità di caricare css module.
Personalmente utilizzo i css module rispetto ai “normali” file statici, perchè consentono di creare un implementazione dinamica in ambito locale del singolo component/page.
In React i css module sono piuttosto diffusi perchè:
- scoped: se utilizzati nel modo giusto, hanno uno scope limitato al componente/page in cui vengono caricati
- altamente componibili: possono essere combinati in modo differente
- codice pulito: gli stili che non sono utilizzati vengono rimossi automaticamente
- semplicità nell’apprendimento: le logiche utilizzate sono molto semplici da imparare
- solo css: all’interno della definizione del css c’è solo css
Supponiamo di avere creato un component denominato Home. L’importazione di un css module viene effettuata utilizzando l’import :
import styles from "./Home.module.css";
Il css viene definito all’interno del file Home.module.css.
Nel mio caso il problema è stata l’aggiunta di typescript in un applicazione esistente. In questo caso l’importazione del modulo css genera un errore file not found, anche se il file è stata definito correttamente all’interno della folder del component.
A questo punto possiamo utilizzare un particolare plugin che consente di gestire i css module.
Il plugin si chiama typescript-plugin-css-modules e può essere installato con il comando:
npm install -D typescript-plugin-css-modules
Avendo già installato in precedenza typescript, nella nostra applicazione è già presente il file tsconfig.json che contiene al suo interno la sua configurazione.
E’ necessario modificare il file inserendo questa parte nella sezione compilerOptions:
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}che aggiunge il plugin alla compilazione e lo abilita.
Tutto questo però non è ancora sufficiente per potere utilzzare i css module.
L’ultimo passaggio è quello di creare un file denominato global.d.ts all’interno della cartella root del progetto React.
Al”interno di questo file inserire queste due righe:
declare module "*.module.css"; declare module "*.module.scss";
A questo punto l’import andrà a buon fine e sarà possibile definire i css all’interno dl file module.
Questa procedura non è necessaria nel caso in cui l’applicazione React sia stata generata direttamente tramite l’opzione –typescript.