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にコンパイル方法を紹介しました。

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

HTML CSS

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

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

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

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

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

【Unity】開発したゲームをAndroidで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。 さて、今回はUnityで開発したゲームをAndroidで実機テストする方法です。Unity上で再生したときは動いていたゲームも、

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

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

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