React中导入独立CSS文件失败问题求助

核心原因分析 #

• CDN+Babel Standalone环境不支持import导入CSS
  你当前采用的是CDN加载React、ReactDOM+Babel Standalone的纯浏览器运行方式，这种环境没有Webpack等模块打包工具的支持。Babel Standalone仅能转译JS/JSX语法，无法处理import './Style.css'这类非JS模块的导入语句，该导入会直接在浏览器中报错，完全不生效。

• HTML中link标签缺少必要属性
  你的HTML里<link href="/Style.css">未添加rel="stylesheet"属性，浏览器无法识别这是外部样式表，不会加载解析该文件。

• CSS代码存在语法错误
  你写的CSS中所有属性值都加了引号（比如display: "flex"、padding:"10px"），这是错误写法——CSS属性值不需要引号，带引号的内容会被浏览器判定为无效值，直接导致样式不生效。

解决方案 #

1. 移除JS中的无效导入语句 #

直接删除index.js里的import './Style.css';，当前环境不支持该语法。

2. 修复HTML的link标签 #

将link标签修改为标准格式，同时用./指定同层级路径（避免服务器根目录路径匹配问题）：

<link rel="stylesheet" href="./Style.css">

3. 修正CSS语法错误 #

去掉所有属性值的引号：

.header {
    display: flex;
}

.navitems{
    display: flex;
    list-style: none;
    justify-content: space-between;
}

.navitems > div{
    padding: 10px;
    justify-content: space-between;
}

额外说明 #

如果后续想要使用import方式导入CSS，需要切换到Webpack/Vite这类模块打包工具搭建的项目结构，而非纯CDN+Babel的方式。你package.json中安装的css-loader和style-loader是Webpack的依赖，仅在打包环境下生效，纯浏览器环境无法发挥作用。

内容的提问来源于stack exchange，提问作者Ata Baris Akin