NATSUHIKO.JPhome

Next.JS with SCSS

NextJS のスタイルをSCSSで書きたいとき。

パッケージをインストールする

install.sh
npm install --save @zeit/next-sass node-sass

@zeit/next-sass: https://github.com/vercel/next-plugins/tree/master/packages/next-sass

next.config.js

SCSSをimportできるようにnext.config.jsを編集する。

next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass({});

TSXから import できる

Header.tsx
import './header.scss';

export const Header = () => {
  return (
    <header></header>
  );
};