Comment utiliser css-modules et bootstrap en même temps?

Question

J'utilise electron-react-boilerplate pour mon projet et ce passe-partout utilise des modules css à des fins stylistiques. J'ai des problèmes avec l'utilisation du bootstrap et du style personnalisé au même endroit. Supposons que j'ai un extrait de code comme,

<div className="container"> 
    <div className="row custom-css"> 
    // other codes... 
</div> 

dans ce cas « ligne » est une amorce className et « sur mesure css » est mon propre style className. s'il vous plaît aidez-moi à trouver une solution pour ces problèmes afin que je puisse utiliser modules css- et bootstrap ensemble ...

Answer 1

Vous devez importer vos styles de module CSS à partir d'un fichier de module spécifique à ce composant, les interpoler ensuite dans le classname par l'objet retourné ...

MyComponent.css

.myCustomClassName { 
    color: #fff; 
} 

MyComponent.js

import styles from './MyComponent.css'; 

<div className=`row ${styles.myCustomClassName}` /> 

Lorsque la sortie HTML cela deviendrait quelque chose comme ...

<div class="row MyComponent__myCustomClassName___n1cC4ge}` /> 

Donc, tant que vous chargez le CSS bootstrap quelque part qui devrait revenir sur les deux

Answer 2

j'étais un peu coincé avec ceci (quant à la façon de charger Bootstrap). J'ai créé cette modification brute dans mon fichier de configuration webpack.

 { 
     test: /(\.bootstrap\.css$|bootstrap-theme.css|bootstrap.css)/, 
     use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader', 
       options: { 
        minimize: true || {/* CSSNano Options */} 
       } 
      }, 
     ], 
    }, 
    { 
     test: /^((?!\.bootstrap|bootstrap-theme).)*\.css$/, 
     use: [ 
      { 
       loader: 'style-loader', 
      }, 
      { 
       loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
      }, 
      { 
       loader: require.resolve('postcss-loader'), 
       options: { 
        // Necessary for external CSS imports to work 
        // https://github.com/facebookincubator/create-react-app/issues/2677 
        ident: 'postcss', 
        plugins:() => [ 
         require('postcss-flexbugs-fixes'), 
         autoprefixer({ 
          browsers: [ 
           '>1%', 
           'last 4 versions', 
           'Firefox ESR', 
           'not ie < 9', // React doesn't support IE8 anyway 
          ], 
          flexbox: 'no-2009', 
         }), 
        ], 
       }, 
      } 
     ] 
    }, 

Les autres sont parfaitement couverts par alechill