使用ReactJS导入CSS时报错：‘未闭合字符串’求助

嘿，我之前在create-react-app项目里也碰到过类似的奇怪报错——明明JS代码看起来没毛病，错误却偏偏指向CSS文件。咱们一步步来排查：

1. 优先检查CSS文件本身的语法错误 #

报错提示“未闭合字符串”，大概率是你的style.css里藏着语法问题，和JS的导入语句无关。你可以这么做：

• 先把style.css的内容暂时清空，只加一行最简单的测试样式：

  .App {
    color: blue;
  }
  

  然后重启开发服务器，看是否还报错。如果不报错了，说明原来的CSS里有未闭合的字符串（比如url('xxx没加右引号、选择器里的引号配对错误等），逐段恢复CSS内容就能定位到问题点。

2. 确认文件路径和大小写 #

虽然你的导入路径./css/style.css看起来没问题，但要注意两个细节：

• 路径是相对当前App.js文件的位置，比如如果App.js在src/目录下，css文件夹必须在src/css/才正确
• 在Linux或macOS环境下，文件名是大小写敏感的，比如Style.css和style.css是两个完全不同的文件，检查是否有拼写大小写错误

3. 重启开发服务器 #

create-react-app的开发服务器有时候会缓存旧的文件内容，导致一些莫名其妙的错误。试试：

• 关掉终端里的npm start进程
• 重新运行npm start，看报错是否消失

4. 重置依赖（备选方案） #

如果以上方法都不管用，可能是依赖缓存或版本冲突搞的鬼：

• 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件
• 重新运行npm install（或yarn install）
• 再启动开发服务器

你的代码参考 #

import React, { Component } from 'react';
import NavBar from './components/navbar';
import './css/style.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <NavBar />
      </div>
    );
  }
}

export default App;

报错信息 #

./src/css/style.css Module bu...

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