【脱gulp】webpackでstylusを使う。cssとして別ファイル化も。

2019/05/11

2019/06/12

技術系

gulpでのコーディング環境の記事はけっこうな量を見つける事ができますが、webpackになるととたんに少なくなります。

前回の”【脱gulp】webpackでpugを使う。jsonで一括ビルドも。“に続き、今回はcssメタ言語のstylusを使う方法を紹介します。

stylus単体ならgulpでもいいが、jsも扱うならwebpackに一本化した方がいいと思う

pugの記事でも書きましたが、gulpでできるほとんどの事はwebpackでできるので、webpackを一部だけ使うならいっそのこと脱gulpしてwebpackをベースにした方がスッキリしますよ。

という訳で、今回はcssメタ言語のstylusをwebpackで使う方法です。

stylus自体の使い方やwebpackの初期設定などは省いて紹介します。

なぜstylusか

単純に好みです。僕はカッコを書くのがとにかく面倒くさくて、インデントベースの記法を好みます。

また、sassやscssは利用者数が多く参考記事も豊富なので、個人的に好きなstylusの認知度を上げるための布教活動です。

前提

作業フォルダは”src”、出力フォルダは”dist”
pugのファイルは”src/styles”にまとめる

ローダーは3種類 “css-loader”, “postcss-loader”, “stylus-loader”、プラグインを2つ “autoprefixer”, “MiniCssExtractPlugin”

webpackでjs以外の言語を使おうとすると、loaderというものが必要となります。stylusの場合は、実用的に使おうとすると3種類のローダーが必要です。

また、本来webpackでcssを扱うと、別ファイルとして扱ってくれないので、別ファイルとして出力してくれるプラグインが別途必要になります。あと、ベンダープリフィックス手書きとか人間の仕事じゃないのでautoprefixer入れます。

さっそくサンプルコードです。

// webpack.config.js

const autoprefixer = require('autoprefixer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

  ... 省略

  module: {
    rules: [
      {
        test: /\.styl$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer({
                  grid: true,
                  flexbox: true,
                  browsers: [
                    'last 2 versions',
                    'ie >= 11'
                  ]
                })
              ]
            }
          },
          'stylus-loader',
        ]
      },
    ]
  }
}

日本語で書いてみるとこんな感じです。

“.style”というファイル名の時
“/node_modules/” ディレクトリを除外して
MiniCssExtractPluginを使う。ローダーは下記。
1. css-loader オプション-> url: false
2. post-css-loader オプション -> プラグインを使う -> autoprefixer
  1. autoprefixerの設定いろいろ
3. stylus-loader

イメージ・ポイント

ローダーのとこのポイントは、下から読んで行くというところです。

stylusを読み込んで
autoprefixerでベンダープリフィックスとか追加して
最終的にcssに変換して
出力する

あと、css-loaderのオプションのurlという箇所ですが、こちらfalseにしないと、backgroundで画像を使っている場合にエラーがでたりします。

対処法は、画像用のloaderを追加したり、DataURLに変換するloaderを追加したりなどいくつかありますが、単純に画像フォルダにある画像を読み込みたい場合はfalseにしておくと楽です。書いたままで出力してくれます。

あとはwebpack用のjsで.stylファイルを読むだけ

// app.js

import './styles/index.styl'

// index.styl

@import '*/*'

おわりに

pugと違ってstylusは思ったより簡単でした。難しかったところはcss-loader オプションのurl:falseがなかなか理解できずに、file-loaderとかurl-loaderとかの情報に振り回されたところでしょうか。

webpackの思想が、今までのweb制作の現場でスタンダードだった事とかけ離れているところがあり、デフォルトの設定を打ち消す事が必要だったりするのが難しいポイントかもしれませんね。

おまけ

reset cssやbootstrapなど、他のスタイルシートと共存させる方法

すでに出来上がっているcssは、css-loaderだけの記述を追加するといいです。

// webpack.config.js

const autoprefixer = require('autoprefixer')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

  ... 省略

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.styl$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          ... 省略
        ]
      }
    ]
  }
}

// app.js

import 'bootstrap'
import './styles/index.styl'

app.jsのように書いても、1つのcssファイルとして出力してくれます。上から順番に追加されていくので、この場合はbootstrapをベースに、index.stylでスタイルの追加を行えます。