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講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。 今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

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

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

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

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

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

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