デザイン修正 - Githubissues

デザインを修正するために、Next.jsでsassが使えるようにした。

コンポーネントレベルのスタイル指定と、グローバルのスタイル指定両方に対応している。

コンポーネントレベルでスタイルを指定するには拡張子を<コンポーネント名>.module.scssにする。

import styles from '/hogehoge.module.scss';

const hogehoge = () => {
  return <div className={styles.root}>hogehoge</div>
}

export default hogehoge

この記載だと、scssの.rootクラスのスタイルが適用される。

実際に生成されたhtmlを見るとそれぞれのコンポーネントの識別値がclass名の後ろに入るのでかぶらない。

classNameに変数を指定したい場合はstyles[変数名]で指定する。

グローバルスタイルにscssを適用したい場合は、next.config.jsを修正する。

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

src>pages>_app.tsxを作成して下記を記載する。

import '../styles/global.scss';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

sakelog / nextjs_timer