如何在Next.js中简化SCSS模块导入路径（省略文件名与扩展名）

1. 修正拼写错误，调整tsconfig配置 #

你之前的配置里把index.module.scss拼成了index.moudle.scss，这是直接导致模块找不到的原因之一。同时要确保tsconfig.json的baseUrl和paths配置匹配项目结构，路径别名依赖baseUrl定位根目录。

修改后的tsconfig.json关键配置：

{
  "compilerOptions": {
    "baseUrl": "./", // 把项目根目录设为解析基准
    "paths": {
      "@styles/*": ["styles/*/index.module.scss"] // 修正拼写，指定对应路径
    }
    // 保留其他原有配置
  }
}

2. 配置webpack别名兜底（可选但更稳妥） #

虽然Next.js会自动读取tsconfig的路径配置，但偶尔会出现解析延迟，你可以在next.config.js中手动配置webpack别名，确保样式文件被正确识别：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 映射@styles到项目styles目录
    config.resolve.alias['@styles'] = require('path').resolve(__dirname, 'styles');
    // 确保SCSS模块的解析规则正常
    config.module.rules.push({
      test: /\.module\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: { modules: { localIdentName: '[name]__[local]___[hash:base64:5]' } }
        },
        'sass-loader',
      ],
    });
    return config;
  },
};

module.exports = nextConfig;

3. 验证导入并重启服务 #

现在你就可以用简化路径导入样式了：

import styles from '@styles/login';

注意：修改配置后必须重启Next.js开发服务器，否则新配置不会生效。如果VS Code仍报TS错误，按Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server刷新缓存即可。

最后核对文件路径 #

确保你的样式文件确实存在于styles/login/index.module.scss路径下，文件名、扩展名完全匹配——别写成Login.module.scss或者不带module的index.scss。

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