【Rails】Webpackerで共通のsassファイルを自動で読み込む

【Rails】Webpackerで共通のsassファイルを自動で読み込む

Webpackではコンパイル時に、scssファイルの先頭に任意のコードを挿入することが可能です。
この仕組みを利用することで、scssで管理している共通の変数ファイルなどを挿入すれば、都度ファイル側でimportする必要がなくなりとても便利です。

RailsのWebpackerでももちろん利用できるので、その設定方法をご紹介します。

※Webpacker v3以降の解説になります。

Webpackerの設定を変更

`config/webpack/environment.js` を次のように編集します。

“`js
const { environment } = require(‘@rails/webpacker’)
const path = require(‘path’)

// sass-loaderの設定を取得
const sassLoaders = environment.loaders.get(‘sass’)
const sassLoaderConfig = sassLoaders.use.filter(config => config.loader === ‘sass-loader’)[0]

// sass-loaderに自動ロードの設定をがっちゃんこする
Object.assign(sassLoaderConfig.options, {
data: “@import ‘global-imports.scss’;”,
includePaths: [path.resolve(__dirname, ‘../../app/javascript/stylesheets/’)]
})

module.exports = environment
“`

上記のコードの解説です。

まずすでに設定されているWebpackの設定を取得します。

“`js
// sass-loaderの設定を取得
const sassLoaders = environment.loaders.get(‘sass’)
const sassLoaderConfig = sassLoaders.use.filter(config => config.loader === ‘sass-loader’)[0]
“`

そして自動ロードしたいファイルのimport文(scss)を `data` オプションに指定し、 `includePaths` には対象ファイルパスを絶対パスで指定します。

“`js
// sass-loaderに自動ロードの設定をがっちゃんこする
Object.assign(sassLoaderConfig.options, {
data: “@import ‘global-imports.scss’;”, // 共通ファイル全てをimportするファイルを指定
includePaths: [path.resolve(__dirname, ‘../../app/javascript/stylesheets/’)]
})
“`

※パスはご自身のプロジェクトに合わせてください。

参考: webpack/sass-loaderでimport毎に共通ファイルを読み込ませる

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.