Post

[Error] Please put your `@import` rules before your other rules.

Posted
By Dain Kang
1 min read

현상

구글 폰트를 @import로 css에서 로드했는데, 다른 페이지로 넘어갈때마다 아래와 같은 에러가 떴다.

@import rules can’t be after other rules. Please put your @import rules before your other rules.

해결

@import 를 사용하지 않고 next/head의 Head 안에 link 태그를 사용하여 폰트를 넣었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// pages/index.js

import Head from "next/head";

export default function IndexPage() {
  return (
    <div>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

참고사이트

Font Optimization

Typescript
typescript error
This post is licensed under CC BY 4.0 by the author.