1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. webpack
  6. »
  7. webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。
しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

今回はwebpackを使って、Sass(SCSS)をCSSにコンパイルする方法を紹介します。

目次
  1. 必要なパッケージのインストール
  2. webpack.config.jsファイルの内容
  3. コンパイルするSassファイル
  4. webpackでSCSSをCSSにコンパイルする
  5. 複数のSCSSファイルをひとつのCSSにまとめてコンパイルする
  6. まとめ

必要なパッケージのインストール

ではまず、SassをCSSにコンパイルするために必要なパッケージをインストールしましょう。
以下のコマンドを実行してください。

$ npm install webpack webpack-cli css-loader sass-loader sass mini-css-extract-plugin webpack-fix-style-only-entries --save-dev

とてもたくさんのパッケージをインストールする必要があります。

  • css-loader: CSSをCommonJSに変換する
  • sass-loader: sassやscssファイルを読み込んで、CSSにコンパイルする
  • sass: sass-loaderではDart SassかNode Sassをインストールする必要がある(Dart Sassが強く推奨されている)
  • mini-css-extract-plugin: CSSを別ファイルに保存するためのもの
  • webpack-fix-style-only-entries: 不要なファイルを(jsファイル)を削除するためのもの

webpackでSassをCSSにコンパイルしようとすると、どうしてもjsファイルも一緒に出力されてしまうため、webpack-fix-style-only-entriesを使って、不要ファイルを削除するのがおすすめです。

また、フォルダ構成は、このようになります。

webpack-sass/
|-- node_modules/
|   `-- ....../
|-- package-lock.json
|-- package.json
|-- src/
|   `-- scss/
|       `-- style.scss
`-- webpack.config.js

webpack.config.jsやstyle.scssなどの内容は、このあと作っていきます。

webpack.config.jsファイルの内容

では、webpack.config.jsを用意しましょう。
内容は以下のようにします。

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

module.exports = {
	mode: 'development',
	entry: './src/scss/style.scss',
	module: {
		rules: [
			{
				test: /\.s[ac]ss$/i,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'sass-loader',
				],
			}
		],
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'style.css'
		}),
		new FixStyleOnlyEntriesPlugin(),
	],
};

もしSCSSではなく、SASSを使いたい場合は、6行目のエントリーポイントをsassファイルに変更してください。

コンパイルするSassファイル

つづいて、コンパイルするSassファイルを用意しましょう。
今回はSCSSを使っていきます。

src/scss/style.scss

$color-primary: #36e8ff;

.heading {
  color: #ffffff;
  background: $color-primary;
}

webpackでSCSSをCSSにコンパイルする

では、さきほどのscssファイルをCSSにコンパイルしてみます。
以下のコマンドを実行しましょう。

$ npx webpack

するとdistフォルダが作られ、そのなかにstyle.cssファイルが出力されます。
以下のようになっていれば成功です。

dist/style.css

.heading {
  color: #ffffff;
  background: #36e8ff;
}

複数のSCSSファイルをひとつのCSSにまとめてコンパイルする

つぎに、複数のSCSSファイルを、ひとつのCSSファイルにまとめてコンパイルする方法を紹介します。
といっても、特別なことをする必要もなく、エントリーポイントにしたSCSSファイルで、それぞれのファイルをimportするだけです。

たとえば、以下のふたつのファイルを作成します。

src/scss/contents.scss

.contents {
	width: 100%;
	margin: 0 auto;
}

src/scss/sidebar.scss

.sidebar {
	padding-left: 10px;
	padding-right: 10px;
}

さらに、style.scssを以下のように変更します。

src/scss/style.scss

@use "contents.scss";
@use "sidebar.scss";

これでコンパイルを行なってみましょう。

$ npx webpack

するとstyle.cssはつぎのように出力されます。

dist/style.css

.contents {
  width: 100%;
  margin: 0 auto;
}

.sidebar {
  padding-left: 10px;
  padding-right: 10px;
}

このようにすれば、部品ごとにファイルを分けて作ることができるので、作業効率がよくなります。

まとめ

webpackはJavaScriptをバンドルするためのものですが、パッケージを使うことで、様々な機能が使えるようになります。
今回は、その機能のひとつとして、SCSSやSASSをCSSにコンパイル方法を紹介しました。

スポンサードリンク

関連コンテンツ

オススメ記事

オブジェクトを使ってみよう!

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう!前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》す

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です