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

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

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

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

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

• Tweet
• Facebook
• はてブ
• Pocket