ReactJS引入独立CSS文件报错咨询：为何需用Webpack而非纯CSS？

嘿，我来帮你理清楚这个问题：

1. 你的操作确实存在问题 #

浏览器原生并不支持在JavaScript文件里直接import CSS文件，这就是你遇到React Minified Error #130的核心原因。这个错误通常是因为代码尝试渲染了非React元素/组件的无效值——当你写import styles from '../css/style.css'时，浏览器根本不知道如何将CSS文件解析为JS模块，导致模块加载失败，进而触发React的运行时错误。

2. 为什么Webpack能解决这个错误？ #

Webpack这类打包工具的核心作用之一，就是弥补浏览器原生模块系统的局限：

• 浏览器原生的ES模块仅支持导入JS文件，对CSS、图片等非JS资源没有内置处理能力。
• Webpack通过对应的loader（比如css-loader负责解析CSS模块语法，style-loader将CSS注入页面的<style>标签，或mini-css-extract-plugin把CSS打包成独立文件），把CSS转换成浏览器能识别的形式，同时处理import语法的解析，让你的CSS导入逻辑正常运行，不会触发React的错误。

3. 你完全可以使用纯CSS，不需要Webpack！ #

之前的错误是因为你选错了CSS的引入方式，而非必须依赖Webpack才能分离CSS和JS。对于小型项目/静态页面，最简单直接的方式是：
直接在你的HTML文件里用<link>标签引入CSS：

<link rel="stylesheet" href="/static/css/style.css">

这样就能完美实现CSS与JS的分离，完全不需要在JS中导入CSS，也不会产生任何运行时错误。

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