CSSのコンパイルで{": expected "}"

はじめに

この記事は2022年8月にまとめていた「細かいつまずいたことをメモしておく(8月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

問題

以下のファイルをReactで読み込むようにしていたのですがどうしても{": expected "}"というエラーが発生する

Header.module.sass

.header {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	height: 56px;
	width: 100%;
	background-color: #202020;
	a {
		color: white;
		font-size: 1.2rem;
		line-height: 56px;
		padding-left: 1rem;
		text-decoration: none;
	}
	.item {
		&:first-child {
			flex-grow: 1;
		}
		&:last-child {
			flex-grow: 2;
		}
	}
}

Header.js

import Style from './Header.module.scss'

const Header = () => {
	return (
		<div className={Style.header}>
(略)

解決方法

拡張子がsassになっていて正しくはscssだった
直したらうまく動いた。そもそも書き方が二つではかなり違う

参考