過去の記事一覧
今回はSassの開発環境整理をしていきます。
Sass環境構築
dart-sass
dart-sassをnpm経由でインストール
$ npm i sass
typed-scss-modules
CSS modulesを使う時にほぼ必須となるパッケージのインストール
（cssを書いた時の型を自動的に定義してくれる便利パッケージ。）
npm i -D typed-scss-modules
typed-scss-modules.config.tsファイルを作成。
以下記述。
export const config = {
exportType: 'default',
nameFormat: 'none',
implementation: 'sass',
//グローバルファイルの指定(絶対パス)
additionalData: `@use "src/public/styles/global.scss" as *;`,
//ignoreの指定
ignore: ['**/global.scss']
}
ignore: ['**/global.scss']を書かないと、Module loop: this module is already being loaded.のエラーがでます。
npm-run-all
typed-scss-modulesを使用するときは $ npx typed-scss-modules srcを実行する必要がある。
--watchオプションでホットリロードに対応しているそうなので、せっかくなら$ npm run devで一気に起動したい
ということで、複数のscriptを直列または並列的に起動できるnpm-run-allパッケージを導入することになる。
↑を導入すると、run-sで直列, run-pで並列的に実行できるとのこと。
インストール
$ npm i npm-run-all
やりたいことは npm run devで next dev -p 2405 と typed-scss-modules srcを並列的に実行したい。
ということでpackage.jsonを編集
{
"script":{
- "dev": "next dev -p 2405",
+ "dev": "run-p dev:next dev:scss",
+ "dev:next": "next dev -p 2405",
+ "dev:scss": "typed-scss-modules src --watch",
}
}
これでOK。
実際にsassを書いてみる
import type { Metadata } from "next";
import "@/public/styles/destyle.css"
import "@/public/styles/global.scss"
export const metadata: Metadata = {
title: "RSS reader",
description: "ワタシのワタシによるワタシのためのRSSリーダー",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja" id="html">
<body>
<div className="l-inner">
{children}
</div>
</body>
</html>
);
}
:root {
--c-primary: #0a0a0a;
}
@mixin sp {
@media screen and (max-width: 768px) {
@content;
}
}
@mixin ov-pc {
@media screen and (min-width: 1367px) {
@content;
}
}
#html {
font-size: calc(10 / 1366 * 100vw);
@include sp {
font-size: calc(10 / 375 * 100vw);
}
body {
font-size: 1.6rem;
overflow-x: hidden;
padding-top: 10rem;
}
}
.l-inner {
width: 72%;
margin-inline: auto;
}
import styles from './FrontPage.module.scss'
import { client } from '@/libs/client'
type RSS = {
title: string
}
export default async function Home() {
const data = await client.get({
endpoint: 'rss',
})
return (
<main className={styles['p-front-page']}>
<ul className={styles['p-front-page__list']}>
{data.contents.map((rss: RSS) => {
return (
<div className={styles['p-front-page__list__item']}>
<h2 className={styles['p-front-page__list__item--title']}>
{rss.title}
</h2>
</div>
)
})}
</ul>
</main>
)
}
.p-front-page {
$this: &;
height: 120rem;
&__list {
display: flex;
align-items: center;
gap: 1.5%;
&__item {
width: 32%;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 0 1rem #ddd;
&--title {
font-size: 2rem;
}
}
}
}
結果：
global.scssも効いているし、FrontPage.module.scssも問題なく効いている。
これで開発環境はバッチリ。
一旦ここまででpush。
（.scss.d.ts拡張子を持つファイルはgitignoreで指定しています。）
次回予告
次回はページ・コンポーネントの作成を一気にやっていきます。
ちなみに、今回以降のスタイルコードは省略していきます。（長くなりそうなので...）
一気にプロトタイピングしていくぞ〜〜。
案件のご依頼・ご相談について
ワタシが運営するUNOTAMEでは、制作案件やPM業務の外部委託案件などを承っております。
少しでも興味のある方はぜひカジュアルにお話しさせていただけますと嬉しいです。
Twitter(X)のDMや下記ポートフォリオサイトからのお問い合わせ、お待ちしております。