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/’)]
})
“`
※パスはご自身のプロジェクトに合わせてください。