为什么我的 CSS 不工作答案

【问题标题】：why is my css not working为什么我的 CSS 不工作
【发布时间】：2017-11-12 10:16:11
【问题描述】：

我创建了一个反应组件并导入了我的外部 css 文件。一些 CSS 工作正常，但大部分没有显示。不知道我做错了什么。如果有人能指出我正确的方向，那将是非常受欢迎的。

这是我的 CSS

.Layout{
    z-index: 999;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: fixed;
    background-color: rgba(255,255,255,0.3);
    box-shadow: 0px 1px 100px 1px rgba(82, 82, 82, 1);
    height: 3em;
    width: 100vw;
};
.Logo{
    flex: 1;
    color: white;
    font-size: 20;
    padding-left: 15px;
};
.Search{
    flex: 5;
};
.Input{
    text-align: center;
    font-size: 20;
    width: 400;
    border-radius: 8
}

这是我的反应组件

 import React, { Component }     from 'react';
    import { connect }              from 'react-redux';
    import { Locate, autoLocate }   from '../Actions'
    import '../CSS/Header.css'

    class Header extends Component{
        constructor(props){
            super(props);
            this.state={ };
            this.onSearchChange = this.onSearchChange.bind(this);
        }

    componentWillMount(){
        this.props.autoWeather('autoip');
    }

    onSearchChange(event){
        this.props.fetchTodayWeather(event.target.value);
    }

    render(){
        return(
            <div>
                <div className="Layout">
                    <div className="Logo">Weather Now</div>
                    <div className="Search"><input className="Input" placeholder='search the weather in your area' value={ this.props.query } onChange={ this.onSearchChange } /></div>
                </div>
            </div>
        );
    }

    }

    const mapStateToProps = state => {
    const query = state.locate.query;

        return{ query };
    }

    const mapDispatchToProps = (dispatch) => {
        return{
            autoWeather:(location) => dispatch(autoLocate(location)),
            fetchTodayWeather: (location) => dispatch(Locate(location))

    };
    };

    export default connect(mapStateToProps, mapDispatchToProps)(Header)

【问题讨论】：

尝试把两个文件放在同一个目录下来定位问题。
CSS 中的大括号后有分号。这在 CSS 中是无效的（你可能会从编写 JS 中得到它）。删除它们，看看会发生什么
缺少分号？从 '../Actions' 导入 { Locate, autoLocate };
这就是为什么人们总是通过验证器运行他们的 CSS（和 HTML）。

标签： javascript css reactjs

【解决方案1】：

我认为您在加载 CSS 文件时遇到了问题。我遇到了同样的问题，我可以用两种方法解决它。

在您的 webpack.config.js 文件中，它是否包含 CSS 加载程序下面
```
{
 test: /\.css$/,
 use: ['style-loader', 'css-loader'],
}, 
```
关于 CSS 加载器的更多详细信息https://www.npmjs.com/package/css-loader
您也可以将外部 CSS 文件添加到 index.html 中。喜欢下面

<link rel="stylesheet" href="bootstrap.min.css" />

【讨论】：