Travailler avec les noms de classe css et reac-virtualized ou rea-select

Question

Donc j'essaie d'intégrer ces deux modules dans mon projet et j'ai du mal à gérer sa partie CSS.

Mon projet utilise postcss pour transformer mes propres fichiers CSS en fichiers CSS "compilés" avec des noms de classes supplémentaires pour chacun d'entre eux. Les deux reac-virtualized et react-select ont leurs propres fichiers css pour définir le style, mais je ne comprends pas comment je peux les remplacer ou les intégrer dans mon projet.

Ma config webpack css est le suivant:

[ 
{ loader: 'style-loader' }, 
{ 
    loader: 'css-loader', 
    options: { 
    localIndentName, 
    sourceMap: true, 
    modules: true, 
    importLoaders: 1 
    } 
}, 
{ 
    loader: 'postcss-loader', 
    options: { 
    plugins: [ 
     postcssImport({ path: path.resolve(PATHS.app, './css') }), 
     postcssCssnext({ browsers: ['> 1%', 'last 2 versions'] }), 
     postcssReporter({ clearMessages: true }) 
    ] 
    } 
}] 

{ 
    test: /\.css$/, 
    use: loaders 
} 

Quand je fais la ligne suivante dans mon fichier app.js, je reçois une erreur d'analyse a échoué du css (jeton inattendu).

import 'react-virtualized/styles.css'; 

La seule façon que j'ai pu charger les styles CSS est d'utiliser

import '!style-loader!css-loader!./css/unstyled/react-virtualized.css'; 

Signification, copier toute la CSS dans mon propre projet et l'importation sans le travail de postcss. Cependant, je ne sais pas si c'est le meilleur moyen, car il est très explicite de travailler avec ces modules.

Est-ce que quelqu'un a une meilleure solution?

Answer 1

Vous avez 2 options:

1. Faire connaître réagir virtualisé ce qui a généré des noms de classe votre CSS utilise.
2. Indiquez à votre chargeur CSS de ne pas transformer les noms de classe par défaut spécifiques à la réaction.

Pour l'option 1, consultez les documents réac-virtualisés. Par exemple, regardez le List component. Il accepte une propriété className qui spécifie le nom de la classe CSS externe à ajouter à l'élément externe. Puisque vous générez vos propres lignes List, vous pouvez également attacher des noms de classes personnalisées à ces éléments. Pour l'option 2, utilisez les noms de classe par défaut de virtual-reac (également répertoriés dans les documents du projet) et demandez à votre chargeur CSS de ne pas les réduire en les enveloppant dans une instruction :global(...) (comme indiqué dans le docs).