Next 13 + scss でインポートエイリアスを設定する

はじめに

最近Next 13とscssを用いてWebアプリを作る機会があり、SCSSにエイリアスを設定をする際詰まったのでその方法を紹介します

お悩み

variables.scss

$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
);

@mixin mq($size) {
  @media screen and (max-width: #{map-get($breakpoints, $size)}) {
    @content;
  }
}

sample.scss

@use '../../../../variables' as *;

variables.scss の@mixinを使いたい時、相対パスを使うのが煩わしい...

環境

npx create-next-app プロジェクト名

いろいろ聞かれますが、上記のように選択してください

本題

ここからインポートエイリアスについて説明していきます

まずはモジュールのインストールから〜

npm i -D sass

今回はsrc/app/styles配下にグローバルに当てたいscssファイルを追加していきます

.
├── src
│   └── app
│       ├── favicon.ico
│       ├── layout.tsx
│       ├── page.tsx
│       ├── style.module.scss
│       └── styles
│           └── variables.scss
└── tsconfig.json

エイリアスを設定するためにはtsconfig.jsonに以下のように追記してください

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@variables": ["./src/app/styles/variables.scss"], // ここを追加
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

実際に使いたい時は以下のようにします

sample.scss

@use '@variables' as *;

.wrapper {
  @include mq('md') {
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
  }
}