React项目导入CSS文件后浏览器未加载样式问题求助

问题根源 #

你当前的导入方式是按CSS Modules规范编写，但CSS文件名未遵循该规范（需以.module.css结尾），导致无法正确解析类名映射；或是你不需要样式模块化，却误用了模块化导入方式。

两种解决办法 #

办法一：使用CSS Modules（推荐，避免样式污染） #

1. 将styles.css重命名为signup.module.css
2. 导入语句保持不变：

   import styles from "./signup.module.css";
   

3. 组件内className={styles.xxx}的用法无需修改，此时CSS Modules会自动处理类名映射，样式即可正常加载。

办法二：全局导入CSS #

若不需要样式模块化，直接全局引入：

1. 修改导入语句为：

   import "./styles.css";
   

2. 将组件内所有className={styles.xxx}改为字符串类名，示例如下：

   <div className="signup_container">
       <div className="signup_form_container">
           <div className="left">
               <h1>Welcome Back</h1>
               <Link to="/login">
                   <button type="button" className="white_btn">
                       Sign in
                   </button>
               </Link>
           </div>
           <div className="right">
               <form className="form_container" onSubmit={handleSubmit}>
                   <h1>Create Account</h1>
                   <input
                       type="text"
                       placeholder="voter_id"
                       name="voter_id"
                       onChange={handleChange}
                       value={data.voter_id}
                       required
                       className="input"
                   />
                   {/* 其余input、button等元素的className同理修改 */}
                   {error && <div className="error_msg">{error}</div>}
                   <button type="submit" className="green_btn">
                       Sign Up
                   </button>
               </form>
           </div>
       </div>
   </div>
   

额外检查 #

• 确认signup.jsx与CSS文件在同一目录下，路径无误
• 若为自定义Webpack配置，需确保已配置css-loader和style-loader（Create React App默认已配置）

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