[Next.Js] 에서 Scss 사용하기

코딩하는 남자·2022년 6월 15일
0

Next-Js

목록 보기
1/2
post-thumbnail

Next.Js 에서 Scss 사용하는 방법



1. Sass 설치

 npm i sass



2. 이미 있는 css 파일 모두 scss로 변경

styles/global.css styles/Home.module.css

styles/global.scss styles/Home.module.scss 이렇게 바꿔준다.



3. next.config.js 파일 수정

next.config.js에 sassOptions 옵션을 추가한다.

const path = require('path'); // 1. path 선언

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')], // 2. sassOptions 옵션 추가
  },
};

module.exports = nextConfig;


## 4. _variables.scss, _mixins.scss 파일 추가

모든 scss 파일에서 공통으로 사용할 _variables.scss, _mixins.scss 파일을 추가한다.

styles/_variables.scss styles/_mixins.scss



5. next.config.js 파일 수정

이제 next.config.js에 prependData 옵션을 추가한다. 이로써 모든 파일에서 _variables.scss, _mixins.scss 두 파일에서 선언한 변수를 모든 파일에서 사용할 수 있다.

const path = require('path'); 

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
    prependData: `@import "styles/_variables.scss"; @import "styles/_mixins.scss";`, // prependData 옵션 추가
  },
};

module.exports = nextConfig;
profile
"신은 주사위 놀이를 하지 않는다."

0개의 댓글