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でおみくじを作ろう! 小学生からのプログラミング入門

※2021/12/7 もっと分かりやすくなるように、内容を追加《ついか》、修正《しゅうせい》しました。 さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プ

java

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

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

【初心者向け】dotfilesの作り方。開発環境を一瞬で構築しよう!

Macを買い換えたとき、データを全削除した後などは、もういちど自分の開発環境を整える必要があります。しかし、その環境設定は、ちょっと大変な作業だったりします。 そんなとき、dotfilesとい

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した TextV

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

Node.js

Windows10にNode.jsをインストールする方法

みなさんこんにちは。@It_is_Rです。今回は、Windows10にNode.jsをインストールする方法を紹介していきます。 また、Macを使っている場合は「MacにNode.jsをインスト

java

Javaでじゃんけんゲームを作ろう。サンプルコードあり!

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

こんにちは。@It_is_Rでございます。 さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。開発環境はMac OS

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。