React项目中无法导入CSS/SCSS文件问题求助

1. 确认SCSS依赖正确安装 #

• 目前React项目推荐安装sass包（替代旧的node-sass），执行命令：

  npm install sass --save-dev
  # 或
  yarn add sass -D
  

• 打开package.json，确认devDependencies中存在sass依赖。

2. 核对文件导入路径 #

• 从文件结构来看，确保组件中导入SCSS的相对路径准确。比如组件在src/components目录，SCSS在src/styles目录，导入语句应为：

  import '../styles/header.scss'
  

• 注意文件名大小写，系统会区分大小写，避免出现Header.scss和header.scss的匹配错误。

3. CSS Modules的正确使用方式 #

• 启用CSS Modules需要将SCSS文件名改为[name].module.scss格式（必须包含.module.后缀），比如header.module.scss。
• 导入时需将样式赋值给变量，再通过变量引用类名：

  import styles from '../styles/header.module.scss'
  
  // 组件中使用
  <div className={styles.header}>...</div>
  

4. 检查项目配置（自定义Webpack项目） #

• 如果是自定义Webpack的React项目，需确保配置了SCSS处理规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            'style-loader', // 将CSS注入DOM
            'css-loader', // 解析CSS中的@import和url()
            'sass-loader', // 编译SCSS为CSS
          ],
        },
      ],
    },
  };
  

• 若使用Create React App，无需手动配置，安装sass后即可直接使用。

5. 清除缓存并重启服务 #

• 缓存可能导致样式不生效，关闭开发服务后，执行以下操作：
  • 删除node_modules/.cache目录（若存在）
  • 执行npm start -- --reset-cache（CRA项目）重启服务

6. 排查SCSS语法与浏览器报错 #

• 检查SCSS文件是否存在语法错误（比如括号未闭合、变量定义错误）。
• 根据浏览器报错信息定位问题：若提示模块找不到，优先检查路径；若提示编译错误，排查SCSS代码。

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