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

pdkcd3nj 于 11个月前发布在其他

关注(0)|答案(1)|浏览(92)

我在NX monorepo中创建了一个nextjs应用程序，并开始将现有的NX应用程序（在同一个monorepo中）移植到它。
我的NX monorepo设置了许多别名，所有别名都在根tsconfig.base.json文件中配置。例如，我将所有图像保存在图像库中，并从JSX中加载它们：

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

字符串
下面是我在SCSS文件中使用别名的方式：

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

型
这两个都可以在我现有的Non-Nextjs应用程序中工作，但是，当我将应用程序移植到新的Nextjs应用程序时，url()中使用的别名无法识别。我得到的错误如下所示：

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

型
注意，我的css文件位于./themes中，所以它将别名@images/...的url作为相对路径，并将它们附加到当前文件位置。
在scss中使用时，正确处理别名路径的推荐方法是什么？

next.js

来源：https://stackoverflow.com/questions/72179248/how-do-i-configure-nextjs-to-correctly-handle-alias-paths-within-scss

1条答案

按热度按时间

jrcvhitl1#

TypeScript和SCSS的别名必须单独配置。
对于SCSS，您必须在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.js.js，在那里你会做：

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

型
你可以在官方文档中阅读更多关于webpack中别名的内容。
对于TypeScript，你已经看到你可以在tsconfig.json中配置别名：

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

型

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答