Rails6.1 + Webpackerでのデプロイの際のアセットコンパイルでのエラーの対処

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。

DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら弊社HPからご相談をいただけますと幸いです。
以下のような問題に対応することが可能です。

• プロジェクトでRailsエンジニアが足りなくて困っている
• Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
• オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい

また、Railsエンジニアも募集しておりますので、興味がありましたら弊社HPからご連絡いただけますと幸いです。

前提

Rails6.1 + Webpackerで今更感がありますが、まとめておいたことをせっかくなので公開しました。

#　エラーの内容
デプロイの際のアセットコンパイルの際にエラーになってしまい、コンパイルができない状態になっていました。

対処法

config/webpack/loaders/sass.jsを以下の記述で作成します。

config/webpack/loaders/sass.js

module.exports = {
  test: /\.s?css/i,
  use: ['style-loader', 'css-loader', 'sass-loader'],
}

config/webpack/environment.jsに以下の記述を追加して、さきほど作ったsass.jsファイルを読み込ませます。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const sass = require('./loaders/sass') //ここを追加

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.loaders.append('sass', sass) //ここを追加
module.exports = environment

これでアセットコンパイルができるようになり、デプロイすることができました。