如何在同一時間使用css-modules和bootstrap？

我正在爲我的項目使用electron-react-boilerplate，並且此樣板文件正在使用css-modules進行造型。我在使用引導程序和自定義樣式時遇到了麻煩。假設我的代碼片斷一樣，如何在同一時間使用css-modules和bootstrap？

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

在這種情況下，「行」

是一個自舉類名和「自定義樣式表」是我自己的風格類名。請幫我找到這些問題的一些解決方案，使我可以使用CSS 模塊和引導在一起......

來源

2017-05-11 Sovan Jana

你需要從具體到這個組件模塊文件導入CSS樣式模塊，然後將它們插入通過返回的對象類名...

MyComponent.css

.myCustomClassName { 
    color: #fff; 
}

MyComponent.js

import styles from './MyComponent.css'; 

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

當作爲HTML輸出，這將成爲類似...

<div class="row MyComponent__myCustomClassName___n1cC4ge}` />

所以只要你在某處加載引導CSS，應該在兩個

來源

2017-05-15 12:49:30 alechill

我有點堅持回暖這（至於如何加載Bootstrap）。我在我的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', 
         }), 
        ], 
       }, 
      } 
     ] 
    },

其餘由alechill

完全覆蓋

來源

2017-08-16 11:01:19

如何在同一時間使用css-modules和bootstrap？

回答

相關問題