React拆分组件报no-unused-vars警告且关联CSS不加载

你遇到的编译警告、组件不渲染、样式失效问题都是基础语法错误导致的，和CSS加载逻辑、webpack配置无关：

• React JSX 有强制命名规则：自定义组件名必须以大写英文字母开头，小写开头的标签会被解析器直接识别为原生HTML标签，不会绑定你导入的自定义组件。你将组件命名为小写h开头的header_type，书写<header_type/>时React根本没有调用你导入的组件，只是渲染了一个空的、名为header_type的原生自定义标签。这就是控制台提示'header_type' is defined but never used的原因——你导入的组件确实没被使用，元素检查器里看到的也不是组件返回的带window-header类名的div，对应样式自然不会生效。
• header.js文件中没有导入React，直接使用React.Component会触发运行时错误。

1. 将header组件重命名为大写开头的合法名称（社区通用规范是大驼峰命名，比如Header），同步修改导入语句、组件声明、JSX调用处的对应名称，建议把文件名也改成Header.js和组件名保持一致。
2. 在header.js顶部补充React的导入语句。
3. 确认window.css文件中已经编写了.window-header类对应的样式规则。

App.js #

import React from 'react';
import Header from './Header';

class App extends React.Component {
    render() {
        return (
            <div className="window">
                <div className="window-body">
                    <Header/>
                    <div className='window_inner'>
                        <div className="column_left"></div>
                        <div className="column_right"></div>
                    </div>
                </div>
            </div>
        )
    }
}

export default App;

Header.js（原header.js） #

import React from 'react';

class Header extends React.Component {
    render() {
        return (
            <div className="window-header">
                {/* 此处编写头部组件内容 */}
            </div>
        )
    }
}

export default Header;

index.js #

现有index.js逻辑无需修改，只要确认../src/style/window.css中存在.window-header的样式定义即可。

补充提示：只要是自定义组件，不管是类组件还是函数组件，都必须遵循大写开头的命名规则，这是JSX识别自定义组件和原生标签的核心判断依据，属于React入门必须掌握的基础约定。

内容的提问来源于stack exchange，提问作者LAYAN_Jason