Edited at

scssをwebpack4でトランスパイル

CSSのメタ言語であるscssを、

node.js環境でcssにトランスパイルする方法を記載します。

CSSと比較してscssは下記利点があります。


  • 変数が使える

  • ネストが使える

  • 名前空間でネストが可能

  • 別のファイルを読み込んで使える

  • スタイルの使いまわしができる(主にmixinとか)

  • 四則演算が普通にできる(calcとか使わなくていい)

  • 関数が使える(輝度変えたりとか)

  • 制御文が使える(@ifとか@forとか)

lessとかsass記法とかあるようですが、

cssの記法がそのまま使えるscss記法が、

個人的に楽なので使います。

前置きが少し長くなりましたが、始めます。


環境

node.js v8.12.0

npm v6.4.1

webpack 4.29.6

OSとかは何でもいいのですが、

今回はwindows10でVSCodeを使って作っていきます。

ターミナルはgitbashを入れています。

※特に環境は選ばないので、コマンドプロンプトとかでOK


パッケージの作成

任意のディレクトリで初期化します。

$ npm -y init

-yをつけなければ項目を設定できますが、

今回は目的から外れるので割愛します。

package.jsonが作成されます。


トランスパイルに必要なモジュールをインストールする

$ npm -D install webpack webpack-cli

$ npm -D install sass-loader node-sass style-loader css-loader
$ npm -D install mini-css-extract-plugin optimize-css-assets-webpack-plugin

-Dは開発用モジュールとして保存されるオプションで、

付けなくてもよいですが、用途的には開発用なので、

付けました。

webpackのloaderとは、指定のファイルをバンドルするものです

「バンドルする」とは1つにまとめる意味です。

npm
用途  

webpack
ファイルを1つまとめたり、別言語に変換したりする。

webpack-cli
webpackをコマンドラインから実行する為に必要。今回は必須。

sass-loader
(scss)sassをバンドルする。

node-sass
sass-loaderが依存しているので必要。

style-loader
タグにcssを展開する機能。

css-loader
cssをjavascriptに埋め込む。

mini-css-extract-plugin
cssを外部ファイルに出力

optimize-css-assets-webpack-plugin
cssを圧縮する


Webpackの設定ファイルを作る

webpack.config.jsファイルを作成し、に次の設定を


webpack.config.js

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
entry: {
anyname: './src/scss/style.scss',
},
output: {
// 全体の設定
path: path.resolve(__dirname, 'dest'),
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
}
],
},
plugins:[
// cssの出力先を指定する
new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
],
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})],
},
}



トランスパイルするscssファイルを作成する


./src/scss/style.scss

body {

background-color: aqua;
}


実行前にフォルダ構成を確認

image.png

実際に作ったのは、

style.scssとwebpack.config.jsのみです。


実行してcssを出力

$ npx webpack --mode production

--mode指定はwebpack4から必須です。

developmentを指定すると、cssの中身が圧縮されません。

dest/style/にanyname.cssが出力されるので中身を確認します。


./dest/style/anyname.css

body{background-color:#0ff}


まあほぼそのままなので分かりにくいですが、

一応ちゃんと圧縮されて出力されました。


副作用的に得えられた知識


  • entry:を増やせば、バンドルするjsファイルを分けられる


    • あまりにもファイルサイズが大きくなるなら分けるべきだろう




残った課題


  • 不要な〇〇.jsが出力されてしまう


    • webpack自体がjavascriptをバンドルする用途の為、仕方ない??

    • scssからcssだけが目的なら、素直にRubyでトランスパイルすればいい気がした



  • 今回はscssから外部ファイル読み込みに対応してない


    • url-loaderやfile-loaderを追加すればOK




感想

公式ドキュメントだけは分からない部分が多いので、

個人が調べたり、実際ソースみないといけないパターンが多かったです。

その為、調べたことはどこかに残しておけば財産になりそうです。


参考にさせて頂いたサイト

webpack公式

Loading Fonts with webpack

CSSのメタ言語Sass(SCSS)、LESSの完全入門

最新版で学ぶwebpack 4入門 – スタイルシート(CSSやSass)を取り込む方法

WebPack + Sass + file-loader のサンプル

Sassで色を調整する

webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う

Webpack4でes6/sassをcompile