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