Comment faire pour importer des modules CSS avec des caractères d'imprimerie, de Réagir et de Webpack

Comment faire pour importer des modules CSS en caractères d'imprimerie avec Webpack?

  1. Générer (ou auto-générer) .d.ts fichiers CSS? Et l'utilisation classique Tapuscrit import déclaration? Avec ./styles.css.d.ts: 
    import * as styles from './styles.css'
  2. Importation à l'aide de require Webpack fonction? 
    let styles = require("./styles.css");

Mais pour la dernière approche que je doit définir le require fonction.

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

soit import * as styles from ... ou import styles = require(... sont valides. Vous aurez probablement à déclarer un module pour votre fichier css de toute façon-soit explicite ou générique pour tous les fichiers css-- comme le tapuscrit compilateur ne avez aucune idée à ce sujet. voir ici pour le calcul automatique du générateur.
Double Possible de Utiliser les CSS des Modules de Réagir composants avec la Machine construite par webpack

OriginalL'auteur Diego Laciar | 2016-12-26

  1. 22

    A) Comme vous le dites, il y en a un plus simple (et non la meilleure option pour les utiliser besoin:

    const css = require('./component.css')
    • Nous avons besoin de nous typings pour require que ce n'est pas la fonction standard en caractères d'imprimerie.

    • Plus simple de taper pour ce besoin peut être:

      declare function require(name: string): string;

    • Webpack compilera tapuscrit et utiliser les modules correctement - MAIS sans aucune IDE de l'aide et des noms de classe vérifie pour construire.

    B) Il y a une meilleure solution pour une utilisation standard importation:

    import * as css from './component.css'
    • permet une les noms de classe IntelliSense
    • nécessite types de définition pour chaque fichier css, sinon tsc compilateur va échouer

    Pour une bonne IntelliSense, Webpack besoins de générer des types de définition pour chaque fichier css:

    1. Utilisation webpack typings-pour-css-modules-chargeur

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

    2. Chargeur permettra de générer *.css.d.ts fichiers pour chacun des fichiers css dans votre base de code

    3. Tapuscrit compilateur va comprendre que css à l'importation seront module avec des propriétés (les noms de classe) de type chaîne de caractères.

    Mentionné typings-for-css-loader contient un bug et en raison de types de génération de fichiers de retard, il est préférable de déclarer mondiale *.css type dans le cas de notre *.css.d.ts fichier n'est pas généré encore.

    Que petit bug scénario:

    1. Créer le fichier css component.css
    2. L'inclure dans la composante import * as css from './component.css'
    3. Exécuter webpack
    4. Tapuscrit compilateur va essayer de compiler du code (ERREUR)
    5. Chargeur permettra de générer des modules Css typings fichier (component.css.d.ts), mais il est tard pour tapuscrit compilateur pour trouver de nouveaux typings fichier
    6. Exécuter webpack de nouveau correctif erreur de construction.

    Solution facile est de créer de la définition globale (eg. fichier appelé typings.d.ts dans votre source de racine) pour l'importation des Modules CSS:

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

    Cette définition sera utilisée que si il n'existe pas de fichier css généré (par exemple. vous avez ajouté de nouveaux fichier css). Autrement seront utilisés généré spécifiques (doit être dans le même dossier et nommé même que le fichier source + .d.ts extension), par exemple. component.css.d.ts définition et IntelliSense fonctionnera 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 css généré typings vous pouvez l'installation de filtre à l'IDE pour masquer tous les fichiers avec l'extension .css.d.ts dans votre sources.

    La définition globale de fichier semble fonctionner parfaitement.

    OriginalL'auteur Jurosh

  2. 3

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

    declare module "*.module.css";

    Webpack css config:

    {
  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'ai simplement importer le module comme: import * as styles from "./App.module.css";

    OriginalL'auteur wiesson

  3. 0

    Ou importer à l'aide de besoin webpack fonction

    C'est juste ce que je utilisé à faire et à toujours avoir un code dans quelques-uns de mes projets.

    Maintenant : j'ai écrit de type de caractères : http://typestyle.github.io/#/ mais vous n'avez pas à l'utiliser. Il suffit de coller avec const styles = require('./styles.css') si elle vous rend heureux. FWIW, vous pouvez également utiliser des css avec le type de caractères si vous voulez http://typestyle.github.io/#/raw

    Salut Basarat <3, vos liens ne fonctionnent pas.

    OriginalL'auteur basarat

  4. -5

    let styles = require("./styles.css"); est la meilleure approche, car il est es5 version de javascript qui est compatible avec toutes les fonctionnalités de réagir.import * as styles from './styles.css' est es6 version de javascript.

    son ni es5, ni es6, il est tapuscrit et en tant que telle sera transpiled.
    Je suis d'accord avec @Meirion Hughes. merci à tous pour les réponses !

    OriginalL'auteur Codesingh