Closed sakelog closed 3 years ago
デザインを修正するために、Next.jsでsassが使えるようにした。
https://nextjs.org/docs/basic-features/built-in-css-support
コンポーネントレベルのスタイル指定と、グローバルのスタイル指定両方に対応している。
コンポーネントレベルでスタイルを指定するには拡張子を<コンポーネント名>.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} />;
}
デザインをもう少し小綺麗にする