如何解决Next.js中Sass文件@use无法使用已配置绝对路径的问题？

tsconfig.json里的baseUrl只作用于TypeScript/JavaScript的模块导入，Sass有独立的路径解析机制，所以需要单独配置Next.js的Sass编译选项来对齐绝对路径。

解决方案：配置next.config.js的sassOptions #

1. 修改/创建next.config.js：在项目根目录下添加或编辑该文件，用includePaths指定Sass的搜索目录为src：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'src')],
  },
};

module.exports = nextConfig;

2. 重启Next.js开发服务器：修改next.config.js后必须重启服务，配置才会生效。

使用示例 #

假设你的目录结构如下：

project/
├─ src/
│  ├─ components/
│  │  └─ Button/
│  │     └─ Button.module.scss
│  └─ styles/
│     └─ variables.scss

配置前你可能需要写相对路径：

@use '../../styles/variables';

配置后可以直接用从src开始的绝对路径：

@use 'styles/variables';

进阶：自定义别名（可选） #

如果需要和tsconfig里的别名（比如@指向src）完全对齐，可以通过自定义导入器实现：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    importer: (url, prev) => {
      // 处理以@/开头的路径，映射到src目录
      if (url.startsWith('@/')) {
        return { file: path.resolve(__dirname, 'src', url.slice(2)) };
      }
      return null;
    },
  },
};

module.exports = nextConfig;

之后你就可以在Sass里用@use '@/styles/variables'这样的写法，和TS/JS的导入风格完全一致。

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