コンポーネントファイル Hoge.jsで、 CSS Modules を使用して、やりたいと思い。
まずsassをインストール
$ yarn add sass
SCSSファイル作成と読み込み
▼ styles/Hoge.scss
.hoge {
background: red;
}
▼ components/Hoge.js
import test from "../styles/Hoge.scss";
const Hoge = () => {
return (
<div className={style.hoge}>
<h1>こんにちは</h1>
</div>
);
};
export default Hoge;
下記の様なエラーが表示された。
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: components/Hoge.js
グローバルでCSSを読み込みたいときは、_app.js でしか読み込めないよって言ってるっぽい。
【結論】コンポーネントで、CSS Modulesときは...
ファイル名が悪かった、
Hoge.scss にしてたのを Hoge.module.scss にする。
XXX.module.css や XXX.modile.scss の形にしないとグローバルCSSとして扱われて、 _app.js で読み込めないらしい。
結果下記の様になる
▼ styles/Hoge.module.scss
.hoge {
background: red;
}
▼ components/Hoge.js
import test from "../styles/Hoge.module.scss";
const Hoge = () => {
return (
<div className={style.hoge}>
<h1>こんにちは</h1>
</div>
);
};
export default Hoge;
おわり。
↧