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

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

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

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

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

Webpackerの設定を変更

config/webpack/environment.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の設定を取得します。

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

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

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

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

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

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

更新情報はTwitterでも配信しています