javascript - 为什么我的 CSS 不工作

Question

我已经创建了一个 React 组件并导入了我的外部 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
}

这是我的 react 组件

 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)

Answer 1

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

1. 在你的webpack.config.js文件，它是否包含 CSS 加载器 下面

   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
   }, 
   

   以及有关 CSS 加载器的更多详细信息 https://www.npmjs.com/package/css-loader

2. 您也可以将外部 CSS 文件添加到 index.html 中。喜欢 下面

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