Help us understand the problem. What is going on with this article?

scssをwebpack4でトランスパイル

More than 1 year has passed since last update.

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

t-motoki
UXデザイナーを目指しています。 言語はNode.js、C++が好きです。Javaもやってます。 ネットワークインフラも少しやってます。
https://www.tmotoki.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away