web-dev-qa-db-fra.com

Comment importer des modules CSS avec TypeScript, React et Webpack

Comment importer des modules CSS dans TypeScript avec Webpack?

  1. Générer (ou générer automatiquement) .d.ts fichiers CSS? Et utiliser une instruction TypeScript import classique? Avec ./styles.css.d.ts:

    import * as styles from './styles.css'

  2. Importer à l'aide de la fonction require Webpack?

    let styles = require("./styles.css");

Mais pour la dernière approche, je dois définir la fonction require.

Quelle est la meilleure approche ou la meilleure option et celle qui peut également gérer IntelliSense pour les définitions de fichier CSS et les classes?

reactjstypescriptwebpacktypescript-typingscss-modules
23
Diego Laciar

A) Comme vous le dites, il existe une option la plus simple (pas la meilleure) à utiliser nécessite :

const css = require('./component.css')
  • Nous devons avoir des typages pour require car ce n'est pas une fonctionnalité standard dans TypeScript.

  • La saisie la plus simple pour ce besoin spécifique peut être:

    declare function require(name: string): string;

  • Webpack compilera ensuite TypeScript et utilisera correctement les modules - MAIS sans aucune IDE et vérification des noms de classe pour la construction .

B) Il existe une meilleure solution pour utiliser l'importation standard :

import * as css from './component.css'
  • active les noms de classe complets IntelliSense
  • nécessite la définition des types pour chaque fichier css, sinon le compilateur tsc échouera

Pour un IntelliSense correct, Webpack doit générer une définition de types pour chaque fichier css:

  1. Utiliser webpack typings-for-css-modules-loader

    webpackConfig.module.loaders: [
  { test: /\.css$/, loader: 'typings-for-css-modules?modules' }
  { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' }
];

  2. Le chargeur générera *.css.d.ts fichiers pour chacun des fichiers css de votre base de code

  3. Le compilateur TypeScript comprendra que l'importation css sera un module avec les propriétés (noms de classe) de la chaîne de type.

Mentionné typings-for-css-loader contient n bogue et en raison du délai de génération des types de fichiers, il est préférable de déclarer global *.css tapez au cas où notre *.css.d.ts le fichier n'est pas encore généré.

Ce petit bug scénario:

  1. Créer un fichier CSS component.css
  2. Incluez-le dans le composant import * as css from './component.css'
  3. Exécutez webpack
  4. Le compilateur TypeScript essaiera de compiler du code (ERREUR)
  5. Le chargeur générera le fichier de typage des modules Css (component.css.d.ts), mais il est tard pour le compilateur TypeScript de trouver un nouveau fichier de typage
  6. Exécutez à nouveau webpack pour corriger l'erreur de construction.

La solution simple consiste à créer une définition globale (par exemple, un fichier appelé typings.d.ts dans votre racine source) pour importer des modules CSS:

declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

Cette définition sera utilisée s'il n'y a pas de fichier css généré (par exemple, vous avez ajouté un nouveau fichier css). Sinon, sera utilisé généré spécifique (doit être dans le même dossier et nommé comme le fichier source + .d.ts extension), par exemple. component.css.d.ts la définition et IntelliSense fonctionneront parfaitement.

Exemple de component.css.d.ts:

export const wrapper: string;
export const button: string;
export const link: string;

Et si vous ne voulez pas voir les typages css générés, vous pouvez configurer le filtre dans IDE pour cacher tous les fichiers avec l'extension .css.d.ts dans vos sources.

30
Jurosh

J'ai ajouté un fichier nommé Global.d.ts ou typings.d.ts à mon ./src dossier avec quelques définitions de types:

declare module "*.module.css";

Configuration Webss CSS:

{
  test: /\.css$/,
  use: [
    isProductionBuild ? MiniCssExtractPlugin.loader : "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: "[name]_[local]_[hash:base64]",
        sourceMap: true,
        minimize: true
      }
    }
  ]
},

Ensuite, j'importe simplement le module comme: import styles from "./App.module.css";

7
wiesson

Ou importez à l'aide de la fonction require webpack

C'est exactement ce que j'ai utilisé pour faire et avoir encore ce code dans quelques-uns de mes projets.

Maintenant: j'ai écrit typestyle: http://typestyle.github.io/#/ mais vous n'êtes pas obligé de l'utiliser. Restez avec const styles = require('./styles.css') si cela vous rend heureux. FWIW vous pouvez également utiliser le CSS brut avec le style si vous le souhaitez http://typestyle.github.io/#/raw

0
basarat