반응형
넥스트에서 scss 사용설정 및 레이아웃 구조 짜기
sass를 설치한다.
yarn add sass
or
npm i sass
next.config.js 파일을 수정한다.
prependData에는 들어갈 scss파일은, 모든 파일에서 사용할수있으므로 colors정의나 mixin 등을 넣어준다.
public아래에 styles파일을 두었으므로 아래와 같이 경로를 설정해줬다.
/** @type {import('next').NextConfig} */
const path = require('path')
const nextConfig = {
reactStrictMode: true,
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
prependData: "@import 'public/styles/colors.scss'; @import 'public/styles/mixin.scss';",
},
};
module.exports = nextConfig;
styles 폴더에 있는 스타일파일을 scss로 변경해준다.
ex) header.module.scss
ex) globals.scss
components폴더에 Layout.tsx를 생성한다.
import Head from "next/head";
import Link from "next/link";
type Props = {
children: React.ReactNode;
};
export default function Layout({ children }: Props) {
return (
<>
<Head>
<title>TEST</title>
<meta name="description" content="test" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ul style={{display:none;}}>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/test">
<a>Test</a>
</Link>
</li>
</ul>
{/* <Header /> */}
<main className="custom-container">{children}</main>
{/* <Footer /> */}
</>
);
}
app.tsx의 컨텐츠 컴포넌트를 Layout으로 감싸준다.
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import Layout from "src/components/layout/Layout";
import "public/styles/globals.scss"; // 이곳에 공통 scss 선언
function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<SessionProvider session={session}>
<Layout>
<Component {...pageProps} />
</Layout>
</SessionProvider>
);
}
export default App;
복수의 클래스를 선언
복수의 클래스를 선언할때는 아래 두가지 방법으로 추가할 수 있다.
<div className={[customStyle.test, customStyle.active].join(" ")}></div>
<div className={`${customStyle.test} ${customStyle.active}`}></div>
반응형
'[IT] 프로덕트 개발 > React - 리액트' 카테고리의 다른 글
| [React] useState를 사용하여 인풋 만들기 (3) | 2022.09.07 |
|---|---|
| [React] Context api 사용해 로딩 구현하기 (0) | 2022.07.03 |
| [Next] React 에서 Swiper 사용하기 (0) | 2022.06.22 |
| [React] JSX 없이 React 사용하기. createElement (0) | 2022.06.17 |
| [React] 리액트 버튼 컴포넌트 만들기 (타입스크립트) (1) | 2022.06.15 |