これまで静的コーディングやフロントエンド開発などではGulpをベースにした環境を使っていたのですが、少し前にwebpackベースに移行しました。そのときにGulpでやっていたことをwebpackに置き換えていったのですが、今回はwebpackの環境でSassのコンパイルと外部CSSとして書き出すまでの設定についてまとめてみたいと思います。   また、SassのコンパイルにはTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   webpackでCSSを扱う際には、CSSのコードをバンドルしてheadタグのstyle要素内に出力する方法と、外部のCSSファイルとして書き出す方法の2パターンあります。今回は変数で指定してどちらにも対応できるような仕組みにしています。   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。ここでは合計5つのパッケージをインストールしています。sassとパッケージを指定するとDartSassになります。各種ローダーはwebpackでSassやCSSを扱う際に必要となります。

$ npm install --save-dev style-loader css-loader sass-loader sass mini-css-extract-plugin

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "css-loader": "^5.2.4",
    "mini-css-extract-plugin": "^1.6.0",
    "sass": "^1.32.12",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
  }
  .......
}

  今回のディレクトリ構造は下記にようなものを想定しています。TypeScriptとSassのソースファイルはsrcディレクトリに配置し、コンパイルされたものはdistディレクトリに格納される形になります。

node_modules
dist
┣（main.js）
┗（main.css）
src
┣ main.ts
┗ main.sass
webpack.config.js
tsconfig.json

  それではwebpackの設定を行なっていきます。まずは必要なパッケージを読み込んでいきます。ここでは2つのパッケージを読み込んでおり、「path」はプロジェクトディレクトリのパスを変換してくれるもので、必須ではないですが、ディレクトリ構造が複雑になってくる場合にとても便利です。そして「mini-css-extract-plugin」はSassをコンパイルしたときに外部CSSとして書き出すために必要となります。   ここではCSSをhead要素内にstyleタグとして書くか、外部CSSファイルとして書き出すか選択できるようになっています。head要素内にstyleタグに書くCSSの場合には「style-loader」を、外部CSSファイルとして書き出す場合には「mini-css-extract-pluginのローダー」を指定する形になります。 【webpack.config.js】

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const cssInline = false;
if(cssInline) {
  styleLoader = 'style-loader';
} else {
  styleLoader = { loader: MiniCssExtractPlugin.loader };
}
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          styleLoader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'main.css' })
  ]
}

  あとは、TypeScriptやJavaScriptの時と同様に拡張子ごとに使うローダーを設定していきます。Sassファイルの場合には、まずsass-loaderでSassを解析し、続いてcss-loaderでCSSを文字列としてスクリプト内で扱い、最後にstyle-loaderもしくはmini-css-extract-pluginのローダーを読み込みCSSコードを配置します。そして忘れてはいけないのが、pluginsでmini-css-extract-pluginを設定してあげる必要があります。ここで引数には書き出し後のファイル名を指定できます。もし書き出し後のファイルをディレクトリに入れる場合にはそのディレクトリを含めたパスをまとめて指定する形になります。   そして、コンパイルをするためにはエントリーポイントとなるファイルでSassファイルをインポートしてあげる必要があります。こうすることで、CSSがJavaScriptの内部で文字列として扱われ、処理の通りに書き出されるようになります。 【main.ts】

import './main.sass';

  実際にコンパイルしてみると、このようにHTML上でCSSが反映されているのが確認でき、コンパイル後のJavaScriptファイルにもCSSが文字列として含まれていることがわかります。   webpack.config.jsの中でdevtool: 'source-map'を指定してマッピングファイルを有効にしていると、Sassファイルの中身も確認することができ、デバッグ時に役立ちますね。   CSSをhead要素内にstyleタグとして書き出した場合にはこのようになります。そのままCSSが書かれているのがわかりますね。   もう一方の外部ファイルとしてCSSを書き出した場合でもこのようにコンパイルされたCSSが確認できます。プロジェクトに合わせて使い分けることができますね。   ちなみにstyle-loaderのオプションではstyleタグとして書き出す設定ができるオプションが用意されています。こちらについては下記のドキュメントを参考にしてみてください。 【npm style-loader】 https://www.npmjs.com/package/style-loader  

---

  今回はwebpackでSassのコンパイルとCSSを外部ファイルとして書き出す設定についてまとめてみました。Gulpからwebpackの移行をする上では他にもいろんな処理が必要になります。この他にもGulpのタスクとして実行させていたものもどんどん置き換えていきたと思いますので、また別記事もご参考ください。