Pugでscssを使う方法

Pugでscssを使う方法

PugでSCSSを使うには、PugのテンプレートとSCSSのスタイルシートを組み合わせることができます。
以下に手順とコード例を示します。

1. プロジェクトのセットアップ

Node.jsとnpmがインストールされていることを確認してください。
次に、プロジェクトを作成し、PugとSCSSの関連パッケージをインストールします。

mkdir my-project
cd my-project
npm init -y
npm install pug scss

2. SCSSの設定

SCSSファイルを作成し、スタイルを記述します。
例えば、styles.scssというファイルを作成します。

// styles.scss
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

3. Pugのテンプレート作成

Pugテンプレートファイルを作成し、必要に応じてSCSSファイルをリンクします。
例えば、index.pugというファイルを作成します。

// index.pug
doctype html
html
  head
    title サンプルページ
    link(rel='stylesheet', href='styles.css')
  body
    h1 SCSSとPugの組み合わせ
    p これはPugテンプレートとSCSSスタイルのサンプルです。

4. ビルドツールの設定

SCSSをコンパイルしてCSSに変換するために、ビルドツールを設定します。
例えば、sassを使ってSCSSをCSSに変換できます。

npx sass styles.scss styles.css

5. Pugテンプレートのコンパイル

PugテンプレートをHTMLに変換します。
例えば、pugを使ってテンプレートをコンパイルできます。

npx pug index.pug

この手順で、PugとSCSSを使ってスタイリングされたHTMLを生成することができます。