webpack で scss を扱う

Web アプリの画面レイアウトや装飾は通常の Web サイトと同様に css を使用します。css は実行時まで構文チェックなどが行えないので、「イケてる」css である sass(scss)で記述し、css にコンパイルするのがよいでしょう。今回は webpack 経由で scss を扱う方法を説明します。

ビルドに必要なツールを追加する

npm 経由で scss のビルドに使うツールを追加します。追加するツールは node-sass sass-loader style-loader css-loader の 4 つです。

npm install --save-dev node-sass sass-loader style-loader css-loader

(中略)

+ css-loader@3.2.0
+ sass-loader@8.0.0
+ style-loader@1.0.0
+ node-sass@4.13.0
added 115 packages from 70 contributors and audited 1787917 packages in 14.849s
found 0 vulnerabilities

webpack.config.js に設定を追加する

次に、scss ファイルをビルド対象とするための設定を webpack.config.js に記述します。module.rules 中のコメント以下が追加部分です。

module.exports = {
  mode: "development",

  entry: "./src/main.ts",

  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
      // scssファイルに対する処理
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          {
            loader: "css-loader",
            options: {
              sourceMap: false,
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: false,
              sassOptions: {
                includePaths: ["./node_modules"],
              },
            },
          },
        ],
      },
    ],
  },

  resolve: {
    extensions: [".js", ".ts"],
  },
};

scss ファイルを作成する

ビルドの準備ができたら、早速 scss ファイルを作成してみましょう。main.ts と同じフォルダに myStyle.scss ファイルを作成します。

body {
  background-color: antiquewhite;
}

main.ts で読み込む

作成した scss ファイルは main.ts 側で読み込む必要があります。読み込むにはモジュールと同様に import を使います。

// page.jsを読み込む
import page from "page";
import { TopPage } from "./TopPage";
import { SecondPage } from "./SecondPage";

import "./myStyle.scss";

まとめ

webpack を使って scss をビルドする方法を説明しました。なぜ scss をビルドできるようにするかは、次回の記事で判明します。