组件看不到全局样式

Question

Component from globalstyle

Global styles are visible only in this component, 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')
);

---

Component that should get styles

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

Try adding global to your class name. Eg

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

Answer 2

Those styles will only be loaded if <Header /> appears somewhere in <App /> . I'm assuming that's the case, but otherwise make sure that the header component shows up in <App /> . If that's not working, try looking around your Network tab of the web inspector and reload the page -- see if your CSS is even being loaded.

EDIT: Just seeing where in the code your class isn't working. If .test is a class in your global styles file, it wouldn't show up in the Header.css file. Try removing "styles" and just give it a class of test if test is a class in flexboxgrid.min.css .

Answer 3

Import for CSS is

import './Header.css'

Reference the css classes in your component then with:

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

Answer 4

您将需要将引导程序导入到index.jsx中，目前您仅导入此文件，require（'./ basestyle / flexboxgrid.min.css'）还不够，如果不这样做，系统将如何知道是否存在boostrap进口的