web-dev-qa-db-fra.com

Charger le module CSS dans ReactJS + TypeScript et réagir à nouveau

Je crée la configuration initiale d'un projet de validation technique à l'aide de ReactJS et TypeScript, et j'aimerais y inclure les modules CSS sans éjecter la configuration de Webpack.

Voici les étapes que j'ai suivies jusqu'à présent:

  • npm installer -g créer-réagir-application
  • créer-réagir-app première application --scripts-version = réagir-scripts-ts
  • npm installer react-app-rewired --save-dev
  • npm installer --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
  • package.json: "start": "réagit-app-rewired début --scripts-version react-scripts-ts"

  • config-overrides.js:

    const rewireCssModules = require ('react-app-rewire-css-modules'); module.exports = fonction override (config, env) { config = rewireCssModules (config, env);
    retour config; }

J'ai correctement défini mon fichier App.module.scss et l'ai référencé dans mon fichier App.tsx:

importer les styles de './App.module.scss';

Lorsque j'exécute le projet, j'ai une erreur concernant le module CSS: Impossible de trouver le module './App.module.scss'.

Lorsque je fais exactement le même projet sans la configuration TypeScript, cela fonctionne bien.

Que dois-je changer pour que les modules CSS soient pris en compte?

Je suis tombé sur typings-for-css-modules-loader, mais je ne sais pas comment l'intégrer à ma configuration car je n'ai pas éjecté la configuration de WebPack.

Merci d'avance,

Thomas .T

EDIT 1: J'ai ajouté un fichier global.d.ts avec:

  • déclarer le module '* .css'

  • déclarer le module '* .scss'

Et ça a fait l'affaire. Je n'ai pas utilisé typings-for-css-modules-loader à la fin.

La réponse provient de cet article: https://hackernoon.com/zero-config-react-TypeScript-css-modules-jest-with-poi-bbcedfe2383a

cssreactjstypescriptwebpackreact-css-modules
4
Thomas KiTe Trentin

J'ai ajouté un fichier global.d.ts avec:

  • déclarer le module '* .css'
  • déclarer le module '* .scss'

Et ça a fait l'affaire. Je n'ai pas utilisé typings-for-css-modules-loader à la fin.

La réponse provient de cet article: https://hackernoon.com/zero-config-react-TypeScript-css-modules-jest-with-poi-bbcedfe2383a

Je vais accepter cela comme une réponse dans les 2 jours.

1
Thomas KiTe Trentin

J'ai eu la solution de rechange après avoir beaucoup cherché sur Google. Je suis nouveau pour réagir js et essayer de construire en utilisant TypeScript alors j'ai trouvé la solution et a commencé à utiliser 

réagir-script-ts

paquet. Mais quand j'ai commencé à utiliser le module css, j'ai rencontré le problème import class de './button.css' n'a pas fonctionné, j'ai donc utilisé import './button.css' , mais eu beaucoup de conflits css, css composant plus élevé portée toujours remplacée par composant inférieur. tellement googlé beaucoup et finalement obtenu la solution.

Solution À partir de la version 2.1, create-react-app prend en charge TypeScript et convertit votre application en version 2.1 ci-dessus.

1.create new application using `npx create-react-app my-new-app --TypeScript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run

source: https://joshblog.net/2018/upgrading-a-react-and-TypeScript-app-from-react-scripts-ts-to-create-react-app-v2-1/

0
Rakesh Swain