Next.JS의 절대 경로에서 가져오기 및 @use

나는 몇 년 동안 JS와 내 Sass/Scss 항목에서 내 상대 경로 가져오기를 무시했습니다. 오늘 나는 마침내 살펴보고 이것이 어떻게 해결될 수 있는지 보기로 결정했습니다.

노드/타입스크립트

따라서 다음과 같은 수입품을 사용하는 대신

import colors from "../../css/colors.module.scss";

import colors from "../css/colors.module.scss";

복사-붙여넣기가 정말 힘들고 보기에도 흉해 보입니다.

import colors from "@/css/colors.module.scss";

내가 프로젝트의 어디에 있든. 이 문제를 해결하려면 이것을 tsconfig.js에 추가하기만 하면 됩니다.

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/css/*": ["css/*"]
    }
   }

참조: Next.JS Documentation

Scss의 경우 @use / @import

Sass도 마찬가지입니다. 추가해야 할 것은

const path = require("path");
const moduleExports = {
  sassOptions: {
    includePaths: [path.join(__dirname, "css/")],
  },
}

그리고 당신은 갈 수 있습니다

@use "../../css/colors.module.scss";

에게

@use "colors.module.scss";

Sass 버전은 "전역 경로"를 추가하기 때문에 약간 다르게 작동합니다. 항상 "동일한 경로"에서 먼저 검색한 다음 전역에서 검색합니다.

참조: Stack Overflow