Rails 6.0 の Webpacker で Stylus を使えるようにする

Rails Webpacker Stylus

目次

概要

コーダー向けに Stylus を使えるようにした際の作業メモです。
合わせて Autoprefixer の設定もしています。
Autoprefixerとは、自動でベンダープレフィックスを付与してくれるPostCSSのプラグインです。

環境

$ rails webpacker:info
Ruby: ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-linux]
Rails: 6.0.2.2
Webpacker: 4.2.2
Node: v12.16.2
Yarn: 1.22.4

前提

rails webpacker:install 実行済みの環境を想定

手順

stylus, stylus-loader のインストール

Webpacker で Stylus を利用するために必要なパッケージをインストールします。
yarn add stylus stylus-loader

参考: stylus-loader - npm

extract_css の設定

  • config/webpacker.yml
default: &default
...
  # Extract and emit a css file
  extract_css: true

この設定を true にすることにより、 stylesheet_pack_tag を利用できるようになります。

参考: https://github.com/rails/webpacker/blob/4-x-stable/lib/webpacker/helper.rb#L112-L133

Autoprefixer の設定

  • postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        grid: true,
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

postcss-loader を使う際に読み込まれる設定ファイルです。

参考: GitHub - postcss/postcss-loader: PostCSS loader for webpack

  • .browserslistrc
defaults
ie >= 11

対象ブラウザを設定するファイルです。
IE11系以上をサポートする場合にはこう書きます。

参考: GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

loader の追加, SplitChunks の設定

  • config/webpack/loaders/stylus.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  test: /\.styl(us)?$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'stylus-loader'
  ]
}
  • config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const styl = require('./loaders/stylus')

environment.loaders.prepend('stylus', styl)

environment.splitChunks()

module.exports = environment

アプリケーションから読み込むjsの設定

require("@rails/ujs").start()
require("@rails/activestorage").start()

import '../css/application.styl'

Stylusファイルの設置

body
  h1
    color teal

.sample
  display flex
  justify-content center
  align-items center

layoutでの読み込み

  • app/views/layouts/application.html.slim
doctype html
html lang="ja"
  head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
    title = content_for?(:title) ? yield(:title) : 'タイトル'
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag 'application'
    = javascript_pack_tag 'application'

  body
    = yield

表示確認

最後に rails restart して表示を確認できれば完了です。

最後に

本来は Webpacker を剥がしてフロントエンドつよつよの人が webpack の設定をする方が筋が良さそう。
ただ、時間が無い中で開発を進める場合に Webpacker を導入するのは十分アリだと思った。