next.js에서 scss 사용하기 2편

이제 scss 를 알아보았으니 next.js 프로젝트에 적용시켜보자

yarn add sass

or

npm i sass

패키지매니저를 이용하여 설치한다.

prependData에는 들어갈 scss파일은, 모든 파일에서 사용할수있으므로 colors정의나 mixin 등을 넣어준다.
assets 아래에 styles파일을 두었으므로 아래와 같이 경로를 설정해줬다.

/** @type {import('next').NextConfig} */
const path = require('path')
const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'assets/styles')],
    prependData: "@import 'public/styles/colors.scss'; @import 'public/styles/mixin.scss';",
  },
};

module.exports = nextConfig;

app.tsx에서 import를 해서 불러온다 .

import "assets/styles/globals.scss"; // 이곳에 공통 scss 선언
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "apollo/client";
import type { AppProps } from "next/app";

const App = ({ Component, pageProps }: AppProps) => {
  const apolloClient = useApollo(pageProps.initialApolloState);
  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
};

export default App;