組件看不到全局樣式

Question

globalstyle的組件

全局樣式僅在此組件中可見，col-lg-2，col-md-4-> globalstyle

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style

ReactDOM.render(
  <AppContainer>
     <BrowserRouter>
       <App/>
     </BrowserRouter>
  </AppContainer>,
  document.getElementById('root')
);

---

應該獲得樣式的組件

import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'


const Header = () => (
  <div className="row">
    <div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
       <Link to="/категории">
         <div className={styles.logoBox}>
           <img src={icon} alt="logo"/>
             <h1>Белый кот</h1>
         </div>
       </Link>
    </div>
  </div>
);

export default Header;

Webpack.config https://github.com/minaev-git/TestQuestion

Answer 1

嘗試將全局名稱添加到您的班級名稱。 例如

:global(.yourClass) { //your css }

Answer 2

僅當<Header />出現在<App />某處時，才會加載這些樣式。 我以為是這種情況，但請確保標頭組件顯示在<App /> 。 如果這不起作用，請嘗試查看Web檢查器的“ Network選項卡，然后重新加載頁面-看看是否甚至正在加載CSS。

編輯：只看到您的類在代碼中不起作用。 如果.test是全局樣式文件中的類，則它不會顯示在Header.css文件中。 嘗試刪除“風格”，只要給它一類的test ，如果test是在一類flexboxgrid.min.css 。

Answer 3

的CSS導入為

import './Header.css'

然后在您的組件中引用css類：

 <div className="col-lg-2 col-md-4 test" >

Answer 4

您將需要將引導程序導入到index.jsx中，目前您僅導入此文件，require（'./ basestyle / flexboxgrid.min.css'）還不夠，如果不這樣做，系統將如何知道是否存在boostrap進口的