Preact CLI CSS Modules使用异常：引入后样式类为空求助

我之前在Preact CLI里也碰到过类似的CSS Modules失效问题，咱们一步步来排查可能的原因：

1. 确认Preact CLI版本是否符合要求 #

Preact CLI从v3版本开始原生支持CSS Modules（包括SCSS版本），如果你的版本过低，可能需要升级：

# 查看当前版本
preact --version
# 升级到最新版
npm install -g preact-cli

2. 检查SCSS依赖是否正确安装 #

Preact CLI需要sass（dart-sass）来处理SCSS文件，不要用已废弃的node-sass。如果你只装了基础依赖，可能漏掉了这个：

npm install sass --save-dev

3. 确认文件命名与引入方式无误 #

• 文件名必须严格遵循.module.scss格式，不能写成.modules.scss（多了个s）或者其他变体，你的index.module.scss是符合规范的，但可以再检查下拼写。
• 引入时要确保是导入样式对象，而不是仅引入样式文件：

  // 正确写法，能拿到styles对象
  import styles from './index.module.scss';
  // 错误写法，只会加载样式但不会返回对象
  // import './index.module.scss';
  

  另外，也可以尝试用命名导入测试：

  import * as styles from './index.module.scss';
  

4. 清理开发服务器缓存 #

Preact CLI的缓存有时候会导致模块解析异常，试试清理缓存后重启服务：

# 清理缓存
preact clean
# 重启开发服务
npm run dev

5. 检查是否自定义了webpack配置（如果有） #

如果你修改过preact.config.js，可能不小心覆盖了默认的CSS Modules配置。默认情况下，Preact CLI会对.module.scss文件自动启用CSS Modules，但如果自定义了loader规则，需要确保保留这个逻辑：

export default (config, env, helpers) => {
  // 获取SCSS loader规则
  const scssRule = helpers.getLoadersByName(config, 'scss-loader')[0];
  if (scssRule) {
    // 确保针对.module.scss的规则开启了modules
    scssRule.rule.oneOf.forEach(rule => {
      if (rule.test && rule.test.toString().includes('.module.')) {
        const cssLoader = rule.use.find(u => u.loader === 'css-loader');
        if (cssLoader) {
          cssLoader.options.modules = {
            localIdentName: env.production ? '[hash:base64]' : '[name]__[local]--[hash:base64:5]',
          };
        }
      }
    });
  }
};

先从前面几个简单的步骤开始排查，大部分情况下都是依赖缺失或者缓存问题导致的。

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