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

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;