组件看不到全局样式答案

【问题标题】：Component does not see global styles组件看不到全局样式
【发布时间】：2017-07-25 13:32:00
【问题描述】：

来自全局样式的组件

全局样式只在这个组件中可见，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

【问题讨论】：

我认为问题在于您使用的 css 模块会更改导入的 css 文件中的类名。
可能，但是如何解决呢？
由于您使用的是 postcss，因此使用 :global { } 将所有代码包装在 './basestyle/flexboxgrid.min.css' 中可能会有所帮助
我必须包装所有选择器吗？
如果你想让它们都是全局的，是的：:global { /* content of the file */ }css-next 嵌套应该可以解决问题

标签： javascript css reactjs webpack

【解决方案1】：

尝试将 global 添加到您的班级名称。例如

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

【讨论】：

【解决方案2】：

只有当<Header /> 出现在<App /> 中的某个位置时才会加载这些样式。我假设是这种情况，否则请确保标题组件显示在<App /> 中。如果这不起作用，请尝试查看 Web 检查器的 Network 选项卡并重新加载页面 - 看看您的 CSS 是否正在加载。

编辑：只是看看你的类在代码中的哪些地方不起作用。如果.test 是全局样式文件中的一个类，它不会出现在Header.css 文件中。如果test 是flexboxgrid.min.css 中的一个类，请尝试删除“样式”并给它一个类test。

【讨论】：

【解决方案3】：

CSS 的导入是

import './Header.css'

然后在你的组件中引用 css 类：

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

【讨论】：

【解决方案4】：

你需要将 bootstrap 导入你的 index.jsx，目前你只是导入这个，require('./basestyle/flexboxgrid.min.css') 还不够，你的系统怎么知道有 boostrap如果没有导入

【讨论】：