처음 만난 Next.js 문서
11.4
Sass
Sass는 Syntactically Awesome Style Sheets의 약자로 CSS를 더 강력하고 유지보수하기 쉽게 만드는 CSS 전처리기(Preprocessor) 입니다. Sass는 변수, 중첩, 믹스인(mixin), 상속 등과 같은 기능을 제공하여 복잡한 Stylesheet를 효율적으로 관리할 수 있게 해줍니다.
Next.js에서는 Sass 패키지를 설치한 이후, .scss 및 .sass 확장자를 사용하는 형태로 Sass 통합을 기본적으로 지원합니다. 그리고 컴포넌트 수준의 Sass는 CSS Modules와 .module.scss 또는 .module.sass 확장자를 통해 사용할 수 있습니다.
Next.js에서 Sass를 사용하기 위해서는 먼저 아래와 같이 sass 패키지를 설치합니다.
npm install --save-dev sass
만약 Sass compiler에 커스텀 설정을 하고 싶을 경우, 아래와 같이 next.config.js 파일에 sassOptions를 작성하면 됩니다.
const path = require('path');
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
},
};
Next.js는 CSS Modules 파일에서 내보낸 Sass 변수를 지원합니다. 아래는 primaryColor라는 Sass 변수를 사용하는 예시 코드를 나타낸 것입니다.
// app/variables.module.scss
$primary-color: #13af00;
:export {
primaryColor: $primary-color;
}
// app/page.js
import variables from './variables.module.scss';
export default function Page() {
return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>;
}
마지막 업데이트: 2025년 10월 24일 02시 45분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page