如何配置NextJs以正确处理SCS中的别名路径？

Question

我已经在NX MonorePo中创建了一个NextJS应用程序，并且已经开始将现有的NX应用程序（在同一MonorePo中）移植到它。

我的NX MonorePo设置了许多别名，所有这些都在root tsconfig.base.json.json文件中配置。例如，我将所有图像都保存在图像库中，然后从JSX中加载它们：

import myImage from '@images/myImage.png';

这就是我在SCSS文件中使用别名的方式：

background-image: url('@images/myImage.png');

这些都在我现有的非Nextjs应用中使用，但是，当我将应用程序移植到新的NextJS应用程序中，未识别url（）中使用的别名。我看起来像这样的错误：

Module not found: Can't resolve '../themes/@images/myImage.png'

请注意，我的CSS文件属于./主题，因此它将别名@images /...@images /... urls视为相对路径和附加路径他们到当前的文件位置。

在SCSS中使用时，正确处理别名路径的建议方法是什么？

Answer 1

对于打字稿和SCS的别名必须单独配置。

---

对于SCS，您必须在WebPack配置中配置别名。

在Next.js中，您可以在Next.Config.js中修改WebPack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) =>
    {
        // in my version (v13) I had to write ./@images
        // in your version it may be possible to instead write @images
        config.resolve.alias['./@images'] = '/path/to/images';
        // config.resolve.alias['@images'] = '/path/to/images';

        // in some cases you may need to use path.resolve, but normally it should work without it
        // config.resolve.alias['./@images'] = path.resolve(__dirname, './path/to/images');

        return config;
    }
}

对于Next.js以外的其他项目，您通常会有一个WebPack.config.js，您可以这样做：

module.exports = {
    resolve: {
        alias: {
            '@images': '/path/to/images'
        }
    }
}

您可以在<<<<<<< a href =“ https://webpack.js.org/configuration/resolve/#resolvealias” rel =“ nofollow noreferrer”>官方文档。

---

For TypeScript you already seen that you can configure aliases in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@images/*": ["/path/to/images/*"],
    }
  }
}