Next scss 전역변수 적용하기

전역 스타일 변수들을 한 번에 적용하는 방법을 알아보겠습니다.

 

우선 next.config.js 파일에서 sassOptions을 사용하여 Sass compiler를 설정할 수 있습니다.

sassOptions은 sass-loader의 설정입니다

https://github.com/webpack-contrib/sass-loader?tab=readme-ov-file#additionaldata

addtionalData는 실제 항목 파일 앞에 Sass 코드를 추가하기 때문에 

각각의 스타일 파일에 전역 변수 파일들을 임포트 하지 않아도 scss파일 안에서 전역 변수 사용이 가능합니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  ...
  sassOptions: {
    additionalData: '@import "./src/styles/전역변수를모아놓은파일";',
  },
};

module.exports = nextConfig;